【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の設定ができる。
  • Static Rendering
    • fetch(”https://…”, {cache: “force-cache”})
      • SSG(デフォルトのため省略可)
      • Data Cacheにキャッシュされる。永続的に残る。
      
      
    • fetch(”https://…”, {cache: {next: {revalidate: 3600}}})
      • ISR
      • Data Cacheにキャッシュされ、revalidateに設定した期間後にキャッシュが破棄される。
      
      
  • Dynamic Rendering
    • fetch(”https://…”, {cache: “no-store”})
      • SSR
      • Data Cacheを使用しない。Request MemoizationでHITしない場合、直接Data Source（オリジンサーバー）にアクセスする。（毎回最新のデータが返ってくる。）

• prismaを使って直接データを取得する場合は、デフォルトでDynamic Rendering(SSR)になっている。
  • Static Rendering(SSG or ISR)にしたい場合は、RouteHandlerを介してfetch()で呼びだすか、unstable_cacheを使用する。

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

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

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

• ナビゲーション用のキャッシュ
  • ページを訪問するとRSCペイロードが自動的にキャッシュされる。
  • クライアント側でメモリ内にキャッシュされる。
• Linkコンポーネントを使用することでキャッシュが適用される。
• 静的部分では、Linkコンポーネントのプリフェッチ機能（リンクが画面上に現れた際に、あらかじめ静的部分をバックグラウンドにてプリフェッチしてくれる機能）が働く。
• 動的部分はプリフェッチできないため、データ取得時はloading.jsやSuspenceのfallback UIが表示される。
• キャッシュ期間は、セッション中のみ。
  • 静的ページ　→ デフォルトで5分間。
  • 動的ページ　→デフォルトで30秒。
  • staleTimesでデフォルト時間は変更可能。

キャッシュを無効にする

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

まとめ

上記4つのキャッシュのまとめとして、ユーザーがページにアクセスした際のそれぞれのキャッシュの動きをまとめてみました。

---

1. ユーザがページにアクセス
2. Router Cacheにて、キャッシュの有無を確認
   1. あり
      1. キャッシュを利用して、すぐに画面表示　→ 処理終了
   2. なし
      1. Static Rendering → 3に。
      2. Dynamic Rendering → 4に。
3. Full Route Cacheにて、キャッシュの有無を確認
   1. あり
      1. キャッシュを利用してすぐに画面表示 + Router CacheにSET　→ 処理終了
   2. なし
      1. Data Cahceにてキャッシュの有無を確認
         1. あり
            1. Data Cacheのキャッシュを使用してHTML, RSCペイロードを生成し、Full Route Cache, Router CacheにSETしつつ画面表示　→ 処理終了
         2. なし
            1. オリジンサーバからデータを取得しData CacheにSETしつつ、HTML, RSCペイロードを生成し、Full Route Cache, Router CacheにもSETしつつ画面表示　→ 処理終了
4. オリジンサーバにアクセスし、データ取得
   1. 静的部分＋Loading.jsやSuspenceのfallbackUI
      1. データ取得完了を待たずに、サーバにてレンダリングされ、画面表示
   2. 動的部分
      1. 取得完了次第、遅れて画面表示 + 静的部分とともにRouter CacheにSET　→ 処理終了

※上記の流れの中で、Data Cacheおよびオリジンサーバからデータを取得する際は、Request Memoizationによる重複排除が行われる。

---

今回の記事は以上です。

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