TL;DR
Next.js の 4 種類のキャッシュの 1 つ。ビルド時または Revalidate 時に、静的レンダリングするルートの RSC Payload と HTML を自動でレンダリングし、その結果をキャッシュする。
なぜ必要か
レンダリングのコストを減らし、パフォーマンスを上げるためにある。リクエストのたびにレンダリングせず、事前に生成した RSC Payload と HTML を使うので、応答が速くなる。
仕組み
レンダリングの流れ
サーバでは、まず React が React Server Component を RSC Payload に変換する。次に Next.js が、RSC Payload と Client Component の JavaScript を使って HTML を生成する。
クライアントでは、HTML を初期表示に使う。RSC Payload は差分の検出と DOM の更新に使う。最後に Client Component をハイドレーションし、アプリケーションを操作できる状態にする。
Revalidate と無効化
キャッシュは永続的に保持されるが、次のどちらかで Revalidate できる。
- Data Cache を Revalidate する。サーバ上のコンポーネントが再レンダリングされ、新しい結果が出力される
- 再デプロイする
次のどれかに当てはまるルートは、Full Route Cache の対象外になる。
- Dynamic Functions を使っている
- Route Segment Config で動的レンダリングを指定している
- Data Cache が無効な
fetchがある
export const dynamic = "force-dynamic"
// または
export const revalidate = 0If a route has a fetch request that is not cached, this will opt the route out of the Full Route Cache.
注意点
Next.js 15 から Data Cache がデフォルトで無効になったので、以前よりもキャッシュされる条件が厳しくなっている。