ISR(Incremental Static Regeneration)とは？

ISR(Incremental Static Regeneration)とは？

Next.js のビルドにはいくつかパターンがあります。その中でNext.js 9.4 からIncremental Static Regeneration という機能が導入されました。

直訳すると、(段階的な静的サイト生成)となります。
簡単に説明すると、リクエストに対して静的にビルドされたページを返す。かつ、有効期限を超えたら非同期で静的ページの再生成をSSRで行うことです。

メリットって？

• 事前にすべてのページ生成はせず、1度リクエストされた際のレスポンス内容が生成される。
• アクセス時に初めて生成されるので初回ビルドが高速になる。
• 一定期間ごとにSSRを行うので、描画が高速になる。
• CDNのキャッシュを有効活用しつつ、静的ページの更新を自動的に行え、一定時間後再度リクエストがあった場合、次回以降の内容をビルドするので内容が更新される。

VercelにDeployしてみる

ISRのpagesコンポーネントを作成

• getStaticProps で revalidate を設定すると ISR になります。
• revalidate の値は、前回から何秒以内のアクセスを無視するかを指定します。

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にDeployしてみる

上記のコードをVercelにdeployして挙動を確認してみました。
コード的には、10秒間はキャッシュされたデータが返却され、10秒後に再描写され内容が更新されていることが確認できます。

参考

Zenn 個人開発の限界に挑んだ話
Next.jsのIncremental Static RegenerationをVercel以外でやってみる