Next.js DocのClient-side Router Cacheについて読む
Next.js DocのClient-side Router Cacheについて読む
以下を読み進める。
Client-side Router Cache
これにより、以下をが実現
瞬時の戻る、進むの移動
ナビゲーション間でのフルページリロードの排除
Reactの状態とブラウザの状態の保持
ルーターキャッシュの特徴：
ページはデフォルトではキャッシュされませんが、ブラウザの戻る・進む操作時に再利用される
感想
q: つまり、bfcacheはオフにしていて独自適応しているみたいなこと？ Duration 持続時間
キャッシュはブラウザの一時メモリに保存される
ルーターキャッシュの持続時間は以下の2つの要因によって決定される
キャッシュはナビゲーション間で保持
ただし、ページの更新時にクリア
レイアウトとローディング状態のキャッシュは、特定の時間後に自動的に無効化
その期間は、以下で決まる。
デフォルトのプリフェッチ（prefetch={null}or 未指定）
フルプリフェッチ（prefetch={true} or router.prefetch）
静的・動的ページともに5分間
ページの更新はすべてのキャッシュされたセグメントをクリア
感想
デフォルトのプリフェッチ（prefetch={null}or 未指定）
code: prefetch-option.ts
/**
* Prefetch the page in the background.
* Any <Link /> that is in the viewport (initially or through scroll) will be prefetched.
* Prefetch can be disabled by passing prefetch={false}. Prefetching is only enabled in production.
*
* In App Router:
* - null (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [loading.js](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data. * - true: This will prefetch the full React Server Component data for all route segments, regardless of whether they contain a segment with loading.js.
* - false: This will not prefetch any data, even on hover.
*
* In Pages Router:
* - true (default): The full route & its data will be prefetched.
* - false: Prefetching will not happen when entering the viewport, but will still happen on hover.
* @defaultValue true (pages router) or null (app router)
*/
prefetch?: boolean | null;
Linkのprefetchのcode辿ってみたら、コメント書いてた。そうみたい。
理解メモ
Router Cache
ナビゲーション間で保持されて、ページ更新時にクリア
デフォルトのプリフェッチ（prefetch={null}or 未指定）
フルプリフェッチ（prefetch={true} or router.prefetch）
静的・動的ページともに5分間
デフォルト値
The dynamic property is used when the page is neither statically generated nor fully prefetched (i.e., with prefetch=).
prefetch=trueをしたときのみ、利用できる？
↑の理解から、Router Cacheを使うためには。
これは、prefetchして、それをRouter Cacheに突っ込めるようになる的な意味だと思う。
code:next.config.js
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30, //0から30秒？に変更
static: 180, //300(5分)から180(3分)?に変更
},
},
}
感想
metaとかパンくずとか。
Invalidation 無効化
ルーターキャッシュを無効化する方法は2つ
cookies.setまたはcookies.deleteを使用すると、クッキーを使用するルートが古くなるのを防ぐためにルーターキャッシュが無効化される（認証など）。
router.refreshを呼び出すと、ルーターキャッシュが無効化され、現在のルートに対して新しいリクエストがサーバーに送信されます。
感想
router.refreshは、多分今見ているページでやるとリロード入りそう？
Opting out オプトアウト