【Next.js14】4種類のキャッシュ まとめ

こんにちはNaotoです。

Next.jsを学ぶ中で、キャッシュについての理解を深めるために、学んだ内容をまとめてみました。

自分用にまとめたものですので、間違っている部分がありましたら、申し訳ありません。

その際は、ご指摘いただければと思います。

インプットは以下です。(ShinCodeさんの動画は本当に最強です。)

では、早速4つのキャッシュについてまとめていきます。(箇条書きすみません。)

1. Request Memoization　（サーバー側のキャッシュ）

• 特になにも設定しなくても、Next.jsが自動で行ってくれる、リクエスト結果のキャッシュ。

• 1回のレンダリング期間中にサーバーにて作成/破棄される、ユーザー（デバイス）ごとのキャッシュ。

• このキャッシュがあることで、同じリクエスト（URLとオプションが一緒の場合）を重複排除できる。

  • 個々のコンポーネントで個別にリクエストを行ってもパフォーマンスが悪くならない。(AppRouterで推奨されている末端コンポーネントでのデータ取得に適している。）
    

  • リクエストの結果がサーバー側にキャッシュされるため、重複を排除できる。
    

• ServerComponentでfetch()かつGETを使う場合のみ適用される。

  • ORM等、fetch()以外を使う場合は、React Cacheにて対応する必要がある。
  
  

• データ取得を行う処理は、データ取得層（DAL : Data Access Layer）に分離しておくと良い。（URLの一致が保証されるため。）

2. Data Cache　（サーバー側のキャッシュ）

• revalidateしない限り残り続けるキャッシュ。
• ページ全体のキャッシュ。
• fetch()に対するキャッシュ。JSON形式のレスポンスが、CDN（エッジサーバー）にキャッシュされる。
• fetch()　の引数でData Cacheの設定ができる。
  • fetch(”https://…”, {cache: “force-cache”})
    • Data Cacheにキャッシュされる。永続的に残る。
  • fetch(”https://…”, {cache: {next: {revalidate: 3600}}})
    • Data Cacheにキャッシュされ、revalidateに設定した期間後にキャッシュが破棄される。
  • fetch(”https://…”, {cache: “no-store”})
    • Data Cacheを使用しない。Request MemoizationでHITしない場合、直接Data Source（オリジンサーバー）にアクセスする。（毎回最新のデータが返ってくる。）

• prismaを使って直接データを取得する場合は、デフォルトでno-storeになる。
  • Data Cacheを使用したい場合は、RouteHandlerを介してfetch()で呼びだすか、unstable_cacheを使用する。

3. Full Route Cache　（サーバー側のキャッシュ）

• Static Renderingの時のみ適用されるキャッシュ。
• ページ全体のキャッシュ。
  • 静的部分（HTMLやRSC Payload）がキャッシュされる。

4. Router Cache　（クライアント側のキャッシュ）

• ナビゲーション用のキャッシュ
• クライアント側のメモリ内にキャッシュされる。
• ページを訪問するとRSCペイロードが自動的にキャッシュされる。（静的動的問わず）
• Linkコンポーネントが画面上に現れた際は、事前に（訪問を待たずに）静的部分のRSCペイロードがキャッシュされる（プリフェッチ機能）
  • 動的部分はプリフェッチできないため、代わりにloading.jsやSuspenseのfallback UIがキャッシュされる。
• キャッシュ期間は、セッション中のみ。
  • 静的ページ　→ デフォルトで5分間。
  • 動的ページ　→デフォルトで30秒。
  • staleTimesでデフォルト時間は変更可能。

キャッシュを無効にする

• Server Actions
  • revalidate Path() / revalidate Tag()
  • cookies().set() / cookies().delete()
• router.refresh

まとめ

今回の記事は以上です。

最後までお読みいただきありがとうございました！