07. generateStaticParams統合

generateStaticParamsを使用した動的ルートの静的生成とビルド時の動作を示します。

概念

generateStaticParamsは、動的ルートセグメントと組み合わせて使用し、ビルド時に複数のページを静的生成します。

Cache Componentsと組み合わせることで、効率的な静的生成とキャッシュ管理が可能になります。

動的ルートの例

generateStaticParamsで生成されたページ

高度

以下のリンクは、generateStaticParamsで事前生成されたページです:

投稿 1 を見る投稿 2 を見る投稿 3 を見る

ビルド時の動作

どのようにページが生成されるか

高度
1. ビルド時

generateStaticParamsで指定したIDのページがすべて生成されます

2. リクエスト時

事前生成されたページは即座に返されます（キャッシュから）

3. 未生成のパス

dynamicParams設定により、オンデマンドで生成またはエラー

キャッシュとの関係

Cache Componentsとの連携

高度

"use cache"と組み合わせることで:

  • ビルド時にデータを取得してキャッシュ
  • ページ全体が静的HTMLとして生成
  • 高速な配信が可能
  • 再検証も柔軟に設定可能

使用例

実際の活用シーン

高度
✅ 適している場合
  • • ブログ記事一覧
  • • 商品カタログ
  • • ドキュメントページ
  • • 事前に知っているIDのページ
❌ 不向きな場合
  • • ユーザーごとのダッシュボード
  • • 動的に変わるコンテンツ
  • • 無限に増え続けるID

試してみよう

  1. 上のリンクから各投稿ページにアクセスしてください。
  2. ページの読み込みが非常に高速なことを確認してください（事前生成済み）。
  3. 存在しないID（例: /post/999）にアクセスして、dynamicParamsの動作を確認してください。