Next.jsの ISR（Incremental Static Regeneration）とは - omniSENSE

Next.js ISRとは

Next.js の ISR（Incremental Static Regeneration）とは、静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）の長所を組み合わせた、ページを効率的に生成・更新する機能です。Next.js は React ベースのフレームワークで、ウェブアプリケーションの開発を容易にするために SSR、SSG、クライアントサイドレンダリング（CSR）などの機能を提供しています。

主な特徴

静的ページの生成: ページはビルド時に静的ファイルとして生成され、CDN などで配信されます。これにより、ページの表示が高速化され、SEO にも対応しています。
オンデマンドの更新: ISR では、ビルド時に生成されたページを更新する際に、一度にすべてのページを更新するのではなく、必要に応じて個別のページを更新できます。これにより、大規模なサイトでも効率的に更新が行えます。
スタブデータの利用: 一部のページが更新されるまで、古いデータを表示し続けることができます。これにより、ユーザーは常に最新のデータを待たずにコンテンツを閲覧できます。

サンプルコード

ISR を使用するには、getStaticProps 関数内で revalidate
オプションを設定します。revalidate には、ページが再生成されるまでの秒数を指定します。

SSGとの違いは、revalidate オプションを指定するかしないかの違いのみです。revalidate オプションを指定しない場合、SSGとなります。

export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}