Next.js App Router / Router Cache をしらべる

https://nextjs.org/docs/app/building-your-application/caching#4-nextjs-caching-on-the-client-router-cache
にも概要がある

The React Server Component Payload is stored in the client-side Router Cache - a separate in-memory cache, split by individual route segment. This Router Cache is used to improve the navigation experience by storing previously visited routes and prefetching future routes.

DeepL: React Serverコンポーネントのペイロードは、クライアントサイドのルーターキャッシュ（個々のルートセグメントごとに分割された個別のメモリ内キャッシュ）に保存されます。このルーターキャッシュは、以前に訪問したルートを保存し、将来のルートをプリフェッチすることで、ナビゲーション体験を向上させるために使用されます。

キャッシュ自体はインメモリに持ってる

<Link> に基づいてプリフェッチする

RSC Payloadを持つ。静的に描画されたもののみが対象。

canary # ebebb6a96a7988d3dd7f80f117bf9143497298c2 で調べる

とりあえず雑に RouterCache とかで grep してみると、それ用のキーを作ってるぽいメソッドがヒットする

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/create-router-cache-key.ts#L3-L13

<Link> のprefetch箇所

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/link.tsx#L164-L167

呼ばれる prefetch の実体
https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/app-router.tsx#L274-L299

ACTION_PREFETCH から reducer を辿る

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/router-reducer.ts#L46-L48

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/reducers/prefetch-reducer.ts#L16-L20

実際にRSC Payloadを取得している箇所は次
https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/reducers/prefetch-reducer.ts#L59-L71

fetchServerResponse を辿ると createFromFetch に行き着く。これはReact側が提供するもの

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/fetch-server-response.ts#L133-L139

レスポンスは、Promise状態のまま state.prefetchCache に突っ込まれる

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/reducers/prefetch-reducer.ts#L74-L81

state.prefetchCache とは何という話だが、クライアント側は useReducer を使って状態管理をやってる

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/use-reducer-with-devtools.ts#L159-L162

そのstateの中に prefetchCache が存在する

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/router-reducer-types.ts#L231-L255

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/layout-router.tsx#L579-L580

定義箇所は OuterLayoutRouter であり次のコメントが有る

/**
 * OuterLayoutRouter handles the current segment as well as <Offscreen> rendering of other segments.
 * It can be rendered next to each other with a different `parallelRouterKey`, allowing for Parallel routes.
 */

OuterLayoutRouter は、現在のセグメントと、他のセグメントの <Offscreen> レンダリングを処理します。
別の parallelRouterKey で隣り合ってレンダリングすることができ、パラレルルートを可能にします。

Parallel Route で使う？

createRouterCache が入ったPRを見ると、元々は segmentForCache という変数名だった

https://github.com/vercel/next.js/pull/47957/files#diff-766e952205c9646edb03d07a79bf9ceddaf391ef4f725dc994974ea3cc57fe3fL17

このキーで操作されるのは、同じ useReducer で管理される state 内の cache

https://github.com/vercel/next.js/blob/ebebb6a96a7988d3dd7f80f117bf9143497298c2/packages/next/src/client/components/router-reducer/router-reducer-types.ts#L246-L251

そしてコメントには次のように書いてある

DeepL: キャッシュは、画面に表示されるすべてのセグメントと、以前に表示されたセグメントのReactノードを保持します。
進行中のデータリクエストも保持する。
プリフェッチされたデータはprefetchCacheに別途保存され、ACTION_NAVIGATE中に適用される。

prefetchされてるものと今現在まさに表示しているものは分離して管理されてるという話らしい

state.cache の参照箇所を見てると、

• cache.subTreeData
• cache.parallelRoutes

が値として入るぽい。後者は名前から明らかに parallelRoutesでの利用。
前者は？

単純にツリー構造をネストして保持するためのものっぽい