TL;DR
Next.js の 4 種類のキャッシュの 1 つ。RSC Payload をルートごとにクライアントのメモリに保持し、ページ遷移時のサーバへのリクエストを減らす。
なぜ必要か
ページ遷移を速くするためにある。メモリ上のキャッシュなので、ページの更新(router.refresh)などで消える。
仕組み
ページにアクセスしたときだけでなく、<Link> コンポーネントや router.prefetch によるプリフェッチでもキャッシュが作られる。プリフェッチは本番環境でのみ有効である。
キャッシュの有効期間は次のとおり。
prefetchを指定しない場合: 30 秒prefetch={true}やrouter.prefetchの場合: 5 分
次の場合にキャッシュが無効になる。
- Server Actions の中で、On-demand Revalidation を実行したり、
cookies.setやcookies.deleteを使ったりした場合 router.refreshを呼んだ場合
注意点
Next.js 15 から、ページコンポーネントでは Client-side Router Cache がデフォルトで無効になった。<Link> や useRouter でページを移動しても、ページのセグメントはキャッシュから再利用されない。ブラウザの戻る・進むでの移動と、共有されるレイアウト(layout.tsx、loading.tsx)では引き続き再利用される。
以前と同じ動作にするには、next.config.js で experimental.staleTimes を指定する。
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
}
module.exports = nextConfig