Next.js キャッシュは『4層構造』の理解が必須
Next.js App Router のキャッシュは4層構造で、適切な制御が本番パフォーマンスを決めます。本記事では編集部の視点で、深掘りした挙動を公開情報をもとに整理します。Next.js App Router 実践 もご参考に。
4層のキャッシュ
(1) Request Memoization：同一レンダ内の重複fetch。(2) Data Cache：fetch 結果の永続化。(3) Full Route Cache：静的HTMLキャッシュ。(4) Router Cache：クライアント側遷移キャッシュ。(5) 各層の制御方法が違う。
Data Cache
(1) fetch の next.revalidate 指定。(2) cache: "no-store"：キャッシュ無効。(3) cache: "force-cache"：永続キャッシュ。(4) tags でグルーピング。(5) revalidateTag/Path で無効化。CDN キャッシュ深掘り もご参考に。
Full Route Cache
(1) 静的に生成されたHTML。(2) SSG/ISR で利用。(3) dynamic 関数で無効化：cookies/headers 等。(4) dynamic = "force-dynamic"。(5) revalidate で再生成。
Router Cache
(1) クライアント側のメモリ内。(2) 遷移時の即時表示。(3) staleTime：30秒 / 5分。(4) router.refresh()でクリア。(5) Next.js 15 でデフォルト挙動変更(公開情報をもとに)。
キャッシュ無効化のパターン
(1) Server Actions 後の revalidate。(2) Webhook 経由。(3) 定期的な再ビルド。(4) tag ベース：関連一括。(5) full purge：緊急時。Webhook 設計 もご参考に。
本番でのデバッグ
(1) x-vercel-cache ヘッダ(Vercel)。(2) Source map。(3) logger：next.cache logger。(4) Inspector：DevTools。(5) 監視メトリクス：ヒット率。
キャッシュ戦略の例
(1) 静的ページ：Full Route Cache。(2) 動的データ：Data Cache + tag。(3) ユーザー固有：no-store。(4) 頻繁更新：revalidate: 60。(5) 準静的：revalidate: 3600 + tag invalidate。
失敗しがちなパターン
(1) キャッシュ意図せず固定化：no-store 忘れ。(2) revalidate 過剰：負荷増。(3) tag 命名混乱。(4) Router Cache の挙動誤解。(5) Server Actions 後の更新忘れ。対策は、(1)cache 戦略明示、(2)適切な期間、(3)Style Guide、(4)v15 changelog 確認、(5)revalidate 必須、です。