07. generateStaticParams統合
generateStaticParamsを使用した動的ルートの静的生成とビルド時の動作を示します。
概念
generateStaticParamsは、動的ルートセグメントと組み合わせて使用し、ビルド時に複数のページを静的生成します。
Cache Componentsと組み合わせることで、効率的な静的生成とキャッシュ管理が可能になります。
動的ルートの例
generateStaticParamsで生成されたページ
ビルド時の動作
どのようにページが生成されるか
1. ビルド時
generateStaticParamsで指定したIDのページがすべて生成されます
2. リクエスト時
事前生成されたページは即座に返されます(キャッシュから)
3. 未生成のパス
dynamicParams設定により、オンデマンドで生成またはエラー
キャッシュとの関係
Cache Componentsとの連携
"use cache"と組み合わせることで:
- ビルド時にデータを取得してキャッシュ
- ページ全体が静的HTMLとして生成
- 高速な配信が可能
- 再検証も柔軟に設定可能
使用例
実際の活用シーン
✅ 適している場合
- • ブログ記事一覧
- • 商品カタログ
- • ドキュメントページ
- • 事前に知っているIDのページ
❌ 不向きな場合
- • ユーザーごとのダッシュボード
- • 動的に変わるコンテンツ
- • 無限に増え続けるID
試してみよう
- 上のリンクから各投稿ページにアクセスしてください。
- ページの読み込みが非常に高速なことを確認してください(事前生成済み)。
- 存在しないID(例: /post/999)にアクセスして、dynamicParamsの動作を確認してください。