[Next.JS] getServerSideProps와 getStaticProps, revalidate

이번에 만들어본 서비스에 SSR을 지원하는 Next.JS를 적용하고 Notion API를 이용해서 공지사항을 구현하는 과정을 기록합니다.

 

https://puenti.tistory.com/85

[React] Notion API 연동해보기

먼저 Next.JS에서 지원하는 getSerSideProps와 getStaticProps에 대해 알아보면 이렇습니다.

 

getServerSideProps

getServerSideProps는 매번 요청이 있을 때마다 서버 측에서 데이터를 가져옵니다. 즉, 매 요청마다 실행되며, 데이터를 서버에서 가져와 페이지를 렌더링합니다. 이는 데이터가 항상 최신 상태를 유지해야 하는 경우에 유용합니다. 예를 들어, 외부 API로부터 실시간 데이터를 가져와야 하는 경우에 적합합니다. 이 방법은 페이지가 항상 최신 데이터로 업데이트되어야 하는 동적인 페이지에 적합합니다.

 

getStaticProps

getStaticProps는 빌드 시점에 데이터를 미리 가져옵니다. 이 메서드는 서버 측에서 한 번 실행되며, 데이터를 사전 렌더링하여 정적인 HTML 파일을 생성합니다. 이렇게 생성된 정적 파일은 요청 시 클라이언트에게 제공됩니다. 이는 페이지가 자주 변하지 않거나, 모든 요청마다 데이터를 다시 가져오지 않아도 되는 경우에 유용합니다. 예를 들어, 블로그 게시물, 제품 목록 등과 같이 정적으로 유지되는 데이터에 적합합니다. 정적 생성을 사용하면 서버 부하가 줄어들고, 성능이 향상됩니다.

 

기존 구현, getStaticProps

기존에는 성능과 사용자 경험 측면에서 보았을 때 getStaticProps를 이용해서 구현을 했습니다.

확실히 서버에서 데이터를 사전에 렌더링(SSR)해서 성능과 사용자 경험 측면에서 매우 좋았습니다.

하지만 문제가 있었습니다. "getStaticProps는 빌드 시점에 데이터를 미리 가져옵니다" 

즉, 이후에 데이터가 변경되어도 정적 파일은 업데이트되지 않고 이전에 생성된 데이터를 계속 사용합니다.

따라서 클라이언트는 새로운 데이터를 알지 못하고 이전의 데이터만을 볼 수 있게 됩니다.

그래서 부랴부랴 getServerSideProps로 바꿔봅니다.

 

변경, getServerSideProps

위 문제 때문에 이용자가 공지사항에 들어가면 매번 요청을 하는 getServerSideProps로 바꾸게 됩니다.

그러나 getServerSideProps를 이용하니 성능에 문제가 생깁니다...

즉, 이용자가 공지사항에 들어갈때마다 서버에 요청을 하다보니 렌더링하기까지 짧으면 1초에서 길면 4초라는 시간이 걸렸습니다.

이는 사용자 측면에서 최악이라는 생각이 들어 다른 방법을 찾게 됩니다.

 

최종 getStaticProps와 revalidate

Next.js는 데이터의 업데이트 주기에 따라 정적 파일을 다시 생성할 수 있는 기능을 제공합니다. 이를 통해 정적 사이트 재생성 (Static Site Regeneration)이 가능합니다. 재생성 주기를 설정하여 일정 시간마다 정적 파일을 갱신하거나, 요청 시마다 업데이트된 데이터를 가져올 수 있습니다.

 

데이터 업데이트 주기를 설정하려면 getStaticProps의 options 매개변수를 사용하여 revalidate 값을 설정합니다. revalidate 값은 정적 파일을 재생성하는 주기를 지정하는데 사용됩니다. 예를 들어, 다음과 같이 설정하면 10초마다 정적 파일이 재생성됩니다.

export async function getStaticProps() {
  // 데이터 가져오기 로직
  return {
    props: {},
    revalidate: 10, // 10초마다 재생성
  };
}

 

이렇게 설정하면 Next.js는 설정된 주기에 따라 정적 파일을 재생성하고 클라이언트에게 업데이트된 데이터를 제공합니다. 따라서 getStaticProps를 사용하더라도 일정 주기로 데이터를 업데이트할 수 있습니다.

 

공지사항 페이지 특성상 게시글이 자주 올라가는 게시판이 아니라 getStaticProps를 이용해서 미리 렌더링을 하되 revalidate를 통해 주기적으로 서버에 요청을 해서 성능과 사용자 경험을 해결할 수 있도록 하였습니다.