ISR(Incremental Static Regeneration)이란?

Next.js 빌드에는 몇 가지 패턴이 있습니다. 그 중 Next.js 9.4부터 Incremental Static Regeneration이라는 기능이 도입되었습니다.

직역하면(단계적인 정적 사이트 생성)이 됩니다.
간단히 설명하면 요청에 대해 정적으로 빌드된 페이지를 반환합니다. 그리고 만료일을 넘으면 비동기로 정적 페이지의 재생성을 SSR로 실시하는 것입니다.

장점은?

사전에 모든 페이지 생성은 하지 않고, 1회 요구되었을 때의 응답 내용이 생성된다.

액세스시에 처음 생성되므로 첫회 빌드가 고속이 된다.

일정 기간마다 SSR을 실시하므로, 묘화가 고속이 된다.

CDN의 캐쉬를 유효 활용하면서, 정적 페이지의 갱신을 자동적으로 실시할 수 있어 일정시간 후에 다시 리퀘스트가 있었을 경우, 다음 번 이후의 내용을 빌드 하기 때문에 내용이 갱신된다.

Vercel에 배포하기

ISR pages 구성 요소 만들기

getStaticProps에서 revalidate를 설정하면 ISR이됩니다.

revalidate의 값은 마지막 시간에서 몇 초 이내에 액세스를 무시할지 여부를 지정합니다.

pages/index.tsx

export default function Index({current}) {
  return (
    <div>
        現在時刻は{current}です。
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
    revalidate: 10,
  };
}

Vercel에 배포하기

위의 코드를 Vercel에 deploy하여 거동을 확인해 보았습니다.
코드적으로는 10초 동안 캐시된 데이터가 반환되고 10초 후에 다시 묘사되어 내용이 업데이트되었는지 확인할 수 있습니다.

참고

Zenn 개인 개발의 한계에 도전한 이야기
Next.js의 Incremental Static Regeneration을 Vercel 이외에서 시도