[Next] getServerSideProps 와 getStaticProps

 

getServerSideProps 와 getStaticProps

Next.js에서 SSR을 위한 두 가지 주요 함수인 getServerSideProps와 getStaticProps는 서로 다른 사용 사례와 특징을 가지고 있습니다.

 

 

getServerSideProps

• 서버 사이드 렌더링 (SSR): getServerSideProps는 서버에서만 실행되며, 모든 페이지 요청마다 실행됩니다. 이는 사용자의 요청이 있을 때마다 최신의 데이터를 서버로부터 받아와 페이지를 생성합니다.
• 용도: 동적인 데이터를 다루는 페이지나 사용자의 요청에 따라 달라져야 하는 데이터가 필요한 페이지에 적합합니다. 예를 들어, 사용자의 세션 정보나 검색 쿼리 기반으로 데이터를 불러와야 하는 경우 등입니다.
• 성능: 모든 요청마다 데이터를 가져오고 페이지를 생성하기 때문에 getStaticProps에 비해 상대적으로 느릴 수 있습니다.

 

 

 

getStaticProps

• 정적 사이트 생성 (SSG = Static Site Generation ): getStaticProps는 빌드 타임에 실행되어 페이지를 사전에 생성합니다. 이렇게 생성된 페이지는 모든 사용자에게 동일하게 제공됩니다.
• 용도: 변경되지 않는 데이터를 사용하는 페이지, 블로그 포스트, 제품 목록 등 빈번한 업데이트가 필요하지 않은 데이터를 다루는 페이지에 적합합니다.
• 성능: 페이지가 사전에 생성되어 바로 제공되므로 빠른 로딩 시간을 제공합니다. 데이터가 변경될 경우, 사이트를 다시 빌드해야 하는 단점이 있습니다.
• revalidate : 정적 생성된 페이지들을 주기적으로 업데이트할 수 있게 해 줍니다. revalidate 옵션의 값은 페이지가 새로 생성될 때까지의 시간을 초 단위로 지정
• getStaticPath : 다이나믹 라우팅일 때 getStaticProps를 사용하기 위한 추가 함수. paths와 fallback을 리턴하고 이에 따라 정적페이지를 만든다.

 

 

getStaticProps의 revalidate?

• getStaticProps에서 revalidate 옵션은 정말 중요한 기능입니다.
• 이 옵션은 Next.js의 Incremental Static Regeneration (ISR) 기능을 활성화하여 정적 생성된 페이지들을 주기적으로 업데이트할 수 있게 해 줍니다.
• revalidate 옵션의 값은 페이지가 새로 생성될 때까지의 시간을 초 단위로 지정합니다.
• 배포 후에도 계속 적용됩니다.

export async function getStaticProps() {
  const data = await fetchData(); // 예를 들어 외부 API에서 데이터를 가져오는 함수
  return {
    props: {
      data,
    },
    revalidate: 3600, // 1시간(3600초)마다 페이지를 갱신
  };
}

• 성능과 최신성의 균형: 정적 생성의 성능 이점을 유지하면서도, 데이터의 최신성을 보장할 수 있습니다.
• 스케일링: 트래픽이 급증하는 경우에도 사전에 생성된 페이지를 제공함으로써 서버 부하를 최소화할 수 있습니다.

revalidate 옵션은 데이터가 주기적으로 업데이트되어야 하지만, 모든 요청마다 데이터를 새로 불러오는 것이 부담스러운 경우에 매우 유용합니다.

 

 

revalidate는 ISR(Incremental Static Regeneration)의 동작 방식?

• 점진적 정적 재생성
• 페이지 재생성: getStaticProps에서 revalidate 옵션을 설정하면, 이 값을 기반으로 페이지를 주기적으로 새로 생성할 수 있습니다. 예를 들어, revalidate: 10으로 설정하면, 페이지가 처음 요청받은 후 10초가 지나면 다음 요청이 있을 때 페이지를 다시 생성합니다.
• 백그라운드 업데이트: 페이지가 사용자에게 제공된 후, 만약 revalidate 주기에 따라 페이지를 새로 생성해야 한다면, 이는 백그라운드에서 일어나며, 새로 생성된 페이지는 즉시 사용자에게 제공됩니다.
• 트래픽 증가 시 유용: 사이트에 트래픽이 몰릴 때 이전에 생성된 페이지를 계속해서 빠르게 제공할 수 있으며, 동시에 최신 데이터로 페이지를 주기적으로 갱신할 수 있는 장점이 있습니다.
• 기술적 구현
  • Next.js는 Node.js 환경에서 실행되기 때문에, 서버 사이드에서 정적 페이지를 다시 생성할 수 있는 능력을 가지고 있습니다. ISR이 가능한 이유는 Next.js가 서버에서 계속 실행 중이며, 내부적으로 필요한 타이밍에 페이지를 재생성하고 관리할 수 있는 인프라를 가지고 있기 때문입니다.
  • 이는 전통적인 정적 HTML 사이트와 다릅니다. 전통적인 정적 사이트는 파일이 서버에 한 번 배포된 후 변경되지 않습니다. 반면, Next.js는 ISR을 통해 정적 사이트의 이점을 유지하면서도 필요에 따라 동적으로 페이지를 업데이트할 수 있습니다.
• 배포 후 실행
  • ISR을 사용하는 페이지는 서버나 서버리스 환경에서 호스팅될 때, Next.js 프레임워크가 이 기능을 자동으로 관리합니다. 개발자가 직접 페이지를 주기적으로 재생성하기 위한 스크립트를 실행할 필요는 없습니다. Next.js가 이를 내부적으로 처리하므로, 배포 후에도 ISR은 설정에 따라 자동으로 실행됩니다.

ISR은 특히 콘텐츠가 정기적으로 업데이트되어야 하지만, 모든 사용자 요청에 대해 실시간으로 데이터를 생성하는 것이 부담스러운 경우에 매우 유용한 기능입니다.

이를 통해 최신성을 유지하면서도 빠른 로딩 속도와 높은 성능을 제공할 수 있습니다.

 

 

 

getStaticPath?

다이나믹 라우팅에서 getStaticProps를 사용할 때 쓰여진다.  (/pages/post/[id].js

• 동적 라우팅 지원: getStaticPaths는 동적 경로에 대한 HTML 페이지를 사전에 빌드하기 위해 사용됩니다. 예를 들어, 블로그 포스트를 위한 /posts/[id] 경로가 있을 때, 각각의 고유한 id에 대한 페이지를 사전에 생성할 수 있습니다.
• 정의된 경로 생성: 이 함수는 paths와 fallback 두 가지 값을 반환합니다. paths는 생성해야 할 경로의 리스트를 포함하고, fallback은 요청된 경로가 paths에 없을 때의 처리 방식을 정의합니다.

export async function getStaticPaths() {
  return {
    paths: [ // 동적라우트의 정보 리스트
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: false // 또는 'blocking' 또는 true 또는 false
  };
}

• fallback 옵션
  • false: paths에 정의되지 않은 모든 경로는 404 에러를 반환합니다.
  • true: paths에 없는 경로에 대한 요청이 들어오면 사용자의 요청에 따라 백그라운드에서 페이지를 생성한 후 서빙합니다. 첫 방문자는 fallback 버전의 페이지를 보게 되며, 이후에는 정적 파일로 서빙됩니다.
    • true로 했을 경우 router.isFallback이라는 옵션으로 기다렸다가. 페이지를 보게할 수 있습니다.
  • blocking: paths에 없는 경로에 대한 요청이 들어오면 서버에서 페이지를 생성하고 완성된 페이지만을 클라이언트에게 제공합니다. 이 방법은 사용자에게 중간 상태를 보여주지 않고, 완전히 생성된 페이지를 보여주고 싶을 때 유용합니다.

쓰기가 상당히 까다롭고 제한적...

 

 

 

 

결론

• 언제 사용할까?
  • getServerSideProps는 항상 최신 데이터가 필요하고 사용자 요청에 따라 페이지 내용이 달라져야 할 때 사용합니다.
  • getStaticProps는 데이터가 자주 변경되지 않고 빠른 페이지 로딩이 중요한 경우 사용하면 좋습니다.

 

 

두 방법 모두 데이터를 미리 로드하여 서버 사이드 렌더링의 이점을 활용할 수 있으며, 각각의 상황에 맞게 선택하여 사용할 수 있습니다.