TL;DR

Next.js の 4 種類のキャッシュの 1 つ。RSC Payload をルートごとにクライアントのメモリに保持し、ページ遷移時のサーバへのリクエストを減らす。

なぜ必要か

ページ遷移を速くするためにある。メモリ上のキャッシュなので、ページの更新(router.refresh)などで消える。

仕組み

ページにアクセスしたときだけでなく、<Link> コンポーネントや router.prefetch によるプリフェッチでもキャッシュが作られる。プリフェッチは本番環境でのみ有効である。

キャッシュの有効期間は次のとおり。

  • prefetch を指定しない場合: 30 秒
  • prefetch={true} や router.prefetch の場合: 5 分

次の場合にキャッシュが無効になる。

  1. Server Actions の中で、On-demand Revalidation を実行したり、cookies.set や cookies.delete を使ったりした場合
  2. 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

関連

出典