[Next.js] Next.js의 SSG, ISR

Today, What I learned?

Next.js에서 SSG와 ISR 방식으로 페이지를 어떻게 생성하고 동적으로 라우팅 할 수 있을지 정리해 본다.
CSR과 SSR의 개념은 그래도 들어봤지만, SSG와 ISR이라는 개념은 처음 접했다!..

먼저 SSG와 ISR에 대해 정립해 두어야 확실한 이해를 할 수 있을 것 같다.

SSG(Static Side Generation)

SSG는 이름 그대로, 정적 페이지를 생성하는 것이다.

빌드하는 순간 서버에서 페이지를 렌더링 한다. 페이지 요청이 들어왔을 때 이미 렌더링 된 정적 페이지를 반환한다.

페이지에 구성된 데이터들이 변하지 않는 경우에 유용하다.

반대로, 페이지가 업데이트된다면 그때마다 다시 빌드가 필요하다는 점이 있다.

getStaticProps()를 이용하여 SSG를 구성할 수 있다.

export async function getStaticProps(context) {
  return {
    props: { post: {} },
  }
}

getStaticPaths()를 이용한다면 다이내믹 라우트를 구성할 수 있다.
이 함수는 getStaticProps와 한 쌍으로 사용이 되는데, 결괏값이 getStaticProps의 props로 전달이 된다.

export async function getStaticPaths() {
  return {
    paths: [ // 동적인 페이지들
        { params: { id: '1' } }, // 각 파마리터
        { params: { id: '2' } }, 
        { params: { id: '3' } }
        ],
    fallback: false, // 제공되지 않는 페이지에 대한 처리
  };
}

• paths에 라우팅 경로를 미리 제공해서 어떤 페이지들을 정적으로 미리 생성해 둘지 정해둘 수 있다.
• fallback 값에 따라서 제공하지 않는 페이지에 대한 처리를 지정할 수 있다.
  • false : 제공하지 않는 페이지일 경우 404 에러 처리
  • true : 제공하지 않는 페이지일 경우 지정한 fallback 페이지를 보여주고, 제공되어야 할 페이지를 서버에서 생성하여 보여준다.
  • - 제공되지 않는 /55 -> isLoading... -> 생성된 /55 페이지 로드 완료
  • 'blocking' : 응답을 blocking 했다가 서버에서 응답에 대한 페이지를 생성한 후 보여준다. (SSR과 동일하게 적용된다!)

 

ISR(Incremental Static Regeneration)

ISR은 일정 주기마다 데이터의 최신 여보를 검사해서 업데이트된 데이터로 다시 페이지를 생성한다.
콘텐츠가 업데이트되었을 때 업데이트 된 정보를 보여줄 수 없다는 SSG의 단점을 보완하기 위한 생성 방식이다.

ISR을 설정하는 방법은 getStatticProps에 revalidate 속성만 추가하면 된다.
아래의 경우는 static page 요청 5초 후 다시 한번 페이지를 빌드한다는 얘기!..

export async function getStaticProps(context) {
  const { id } = context.params;

  const response = await fetch(`http://localhost:3001/posts/${id}`);
  const post = await response.json();

  return {
    props: {
      post,
    },
    revalidate: 5, // 5초 후 다시 서버에서 받아옴
  };
}

ISR로 설정이 되었는지는 빌드 시에도 확인할 수 있다.