インクリメンタル静的生成

Static Generation (SSG) は SSR と CSR の懸念事項のほとんどに対処しますが、ほぼ静的なコンテンツのレンダリングに適しています。レンダリング対象のコンテンツが動的であるか頻繁に変更される場合、制限が生じます。

複数の投稿を持つ成長中のブログを考えてみてください。1つの投稿のタイプミスを修正したいだけでも、サイト全体をリビルドして再デプロイしたいとは思いません。同様に、1つの新しいブログ投稿追加のために、既存のすべてのページをリビルドする必要があります。したがって、SSG だけでは大規模なウェブサイトやアプリケーションのレンダリングには十分ではありません。

使用する場合

• 定期的なデータ更新が必要だが完全なリビルドは不要な、ほぼ静的なページがある場合に使用してください
• これはブログやe-コマースなどの大規模サイトで役立ちます。各変更時にすべてのページをリビルドすることは実用的ではありません

使用しない場合

• コンテンツがリアルタイムで変更され、古いデータが許されない場合（ライブスコア、株価ティッカーなど）
• 完全に動的でユーザーごとにパーソナライズされたページの場合 — SSR がより適切です
• リバリデーションウィンドウが異なるユーザーに異なるコンテンツバージョンを表示させる混乱した経験を生む場合

手順

• getStaticProps で revalidate を使用して、バックグラウンドページリジェネレーションの時間間隔を設定してください
• getStaticPaths で fallback: true を使用して、最初のリクエスト時にページを遅延生成してください
• コンテンツ変更後の即座のアップデートには、オンデマンドリバリデーション（revalidatePath、revalidateTag）を検討してください
• Next.js 13+ App Router では、generateStaticParams と非同期コンポーネントを使用して ISR を行ってください

詳細

Incremental Static Generation (iSSG) パターンは、SSG のアップグレードとして導入され、動的データの問題を解決し、静的サイトを頻繁に変更されるデータの大量に対応できるようにスケーリングするのに役立ちます。iSSG では、新しいページへのリクエストが続く中でも、バックグラウンドでページのサブセットを事前レンダリングして、既存ページを更新し、新しいページを追加できます。

サンプルコード

iSSG はビルド後の既存の静的サイトへのアップデート導入を段階的に行うため、2つの方向で機能します。

1. 新しいページの追加
2. 既存ページの更新（Incremental Static "Re"generation とも呼ばれます）

新しいページの追加

遅延読み込みの概念を使用して、ビルド後にウェブサイトに新しいページを含めます。これは、新しいページが最初のリクエスト時に直ちに生成されることを意味します。生成が行われている間、フォールバックページやローディングインジケーターをフロントエンドのユーザーに表示できます。

export async function getStaticPaths() {
  const products = await getProductsFromDatabase();

  const paths = products.map((product) => ({
     params: { id: product.id }
  }));

  // fallback: true means that the missing pages
  // will not 404, and instead can render a fallback.
  return { paths, fallback: true };
}

// params will contain the id for each generated page.
export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    }
  }
}

export default function Product({ product }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  // Render product
}

ここでは fallback: true を使用しました。特定の商品に対応するページが利用できない場合、ページのフォールバックバージョン（例えば上の Product 関数に示されているようなローディングインジケーター）を表示します。一方、Next.js はバックグラウンドでページを生成します。生成されたら、キャッシュされてフォールバックページの代わりに表示されます。ページのキャッシュされたバージョンは、その後のすべての訪問者にリクエスト時に直ちに表示されます。

既存ページの更新

既存ページを再レンダリングするには、ページに適切なタイムアウトを定義します。これにより、定義されたタイムアウト期間が経過するたびにページがリバリデーションされることが保証されます。ユーザーはページのリバリデーションが完了するまで、前のバージョンを引き続き表示します。したがって、iSSG は stale-while-revalidate 戦略を使用して、リバリデーションが行われている間、ユーザーはキャッシュまたは古いバージョンを受け取ります。リバリデーションは完全にバックグラウンドで行われ、完全なリビルドは不要です。

// This function runs at build time on the build server
export async function getStaticProps() {
  return {
    props: {
      products: await getProductsFromDatabase(),
      revalidate: 60, // This will force the page to revalidate after 60 seconds
    }
  }
}

// The page component receives products prop from getStaticProps at build time
export default function Products({ products }) {
  return (
    <>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </>
  )
}

60秒後にページをリバリデーションするコードが getStaticProps() 関数に含まれています。リクエストが来ると、利用可能な静的ページが最初に提供されます。1分ごとに静的ページがバックグラウンドで新しいデータで更新されます。生成されたら、新しいバージョンの静的ファイルが利用可能になり、その後の1分間のすべての新規リクエストに対して提供されます。この機能は Next.js 9.5 以上で利用可能です。

メリット

iSSG は SSG のすべてのメリットとそれ以上を提供します：

1. 動的データ: サイトをリビルドせずに動的データをサポートする能力。
2. 速度: iSSG は SSG と同等かそれ以上に高速です。データ取得とレンダリングはバックグラウンドで行われるためです。クライアントまたはサーバー上での処理はほとんど不要です。
3. 可用性: すべてのページのかなり最近のバージョンが常にオンラインでユーザーがアクセスできます。バックグラウンドでのリジェネレーションが失敗した場合でも、古いバージョンはそのままです。
4. 一貫性: リジェネレーションがサーバー上で1ページずつ行われるため、データベースとバックエンドの負荷が低く、パフォーマンスが一貫しています。その結果、レイテンシーのスパイクがありません。
5. 配布の容易さ: SSG サイトと同様に、iSSG サイトも事前レンダリングされたウェブページを提供するために使用される CDN のネットワークを通じて配布できます。

ソース

• patterns.dev/react/incremental-static-rendering