오늘 한 일

알고리즘 코드카타

오늘 공부한 내용

✅ getServerSideProps

• getStaticProps 의 주기적인 업데이트로도 부족할 때
  (= 입력되는 요청마다 해당 페이지를 재생성 해야할 때
  = 서버에 배포한 후 바로 동적으로 페이지를 사전생성해야 할 때) 사용

• getStaticProps와 마찬가지로 이름을 바꿀 수 없음

• getStaticProps와 차이점 : 빌드 프로세스 중 실행되지 않고 배포 후 상시 서버상에 존재함

• 함수의 목적 : 페이지 컴포넌트에서 프로퍼티를 가지고 옴

• 여기서 작성하는 코드는 서버사이드에서 실행됨
  (유저에게 노출되지 않기 때문에 보안상 가려야 할 작업도 실시할 수 있음)

• props 객체를 반환

• 이 함수에는 revalidate를 설정할 수 없음
  (모든 입력 요청에 함수가 실행되기 때문에 주기를 정하는게 의미 없음)

• 전달 받는 매개변수(context)에 대한 작업이 가능함

• req와 res를 이용하여 요청하고 response를 전송받을 수 있음

• request 객체에 접근할 수 있기 때문에 인증이나 세션 쿠키 등을 확인할 때 유용

• response 객체는 객체에서 작업한 response를 반환하는 것이 아니라 pages 컴포넌트 함수의 props를 포함하고 있는 props 키의 객체를 반환함

• 매 요청마다 업데이트 되는 로직이 단점이 될 수 있도 있음 (매 요청마다 페이지 생성을 기다려야 함)

결론

👉 인증에 대한 액세스가 없다면 getStaticProps를 선택하는 것이 훨씬 나음 (페이지 속도가 빨라짐)
👉 데이터가 매 초마다 몇 번씩 바껴서 revalidate로 감당할 수 없다면 getServerSideProps 사용

export const getServerSideProps = async (context) => {
  const req = context.req;
  const res = context.res;
  // fetch data from an API
  return {
    props: {
      meetups: DUMMY_MEETUPS,
    },
  };
};

✅ getStaticPaths

• getStaticProps 사용할 때만 필요
• 배경 : getStaticProps의 사전 렌더링을 생각하면 사용자가 동적페이지를 방문했을 때가 아니라 빌드할 때 사전에 페이지를 생성되기 때문에 런타임 중 사용자가 입력할 수 있는 모든 동적 값의 URL에 대한 페이지가 사전 생성되어있어야 함(만약 사전 생성되지 않은 URL이 입력된다면 404에러가 표시됨)
• 따라서 모든 동적인 값을 객체로 반환하는 작업을 수행할 함수가 필요

사용

• 객체에는 배열로 입력되는 paths 키가 필요
• 동적 페이지의 버전마다 하나의 객체가 필요 (ex.[{}, {}, {}...])
• 지원하는 매개변수 값이 모두 있는지 혹은 일부만 있는지 확인하는 fallback 필요
  (false : 모두 있음 / ture : 일부만 있음)
• fallback은 특정 동적URL 값에 대해서 일부 페이지만 사전 생성할 수 있는 기능
• fallback: true로 설정하면 입력 요청에 따라 nextJs가 동적으로 해당 페이지를 서버에 생성하려 함
• 사용자들의 방문이 가장 잦은 페이지만 사전 생성하고 나머지는 요청이 입력되었을 때 동적으로 사전 생성하도록 함

export const getStaticPaths = async () => {
  return {
    paths: [
      {
        params: { 
          meetupId: 'm1',
        },
      },
    ],
    fallback: false,
  };
};