Next.jsのキャッシュを理解する

Next.jsのキャッシュが複雑で、一回ちゃんと勉強しておかないといけないなと思ったので、勉強することにしました https://nextjs.org/docs/app/building-your-application/caching こちらのドキュメントの内容をまとめます

概要

Next.jsには主に4つのキャッシュがあります

1. Request Memoization
2. Data Cache
3. Full Route Cache
4. Router Cache

デフォルトで、Next.jsはなるべくキャッシュを使い、パフォーマンスを向上させるようにしています。 つまい、なるべく静的にレンダリングして、リクエストはキャッシュするようにしています。

Request Memoization

Request MemoizationはReactの機能です。 Next.jsがfetchAPIを拡張し、自動でRequest Memoizationを行うようにしています。 Request Memoizationはレンダリングが完了するとメモリをリセットするようになっています。 つまり、ページをレンダリングするときに同じリクエストをしても一回の実行で済むようになるキャッシュと言えます

注意点としては、Request MemoizationはGETに対してのみ有効となっており、他のHTTPメソッドでRequest Memoizationを使用したい場合は、Reactのcache機 を使う必要があります。

Data Cache

Next.jsはデフォルトでサーバーリクエストとデプロイ時にデータを永続敵にキャッシュします。 これは、Next.jsがfetchAPIを拡張し、それぞれのサーバーでのリクエストをキャッシュするようにすることで実現しています。

Data Cacheは永続敵にキャッシュされるため、キャッシュを更新する必要がある場合は、自分たちで設定をする必要があります。

1. Time-based Revalidation
   fetch('https://...', { next: { revalidate: 3600 } })と、fetchAPIのオプションにnext.revalidateを指定することで、キャッシュの有効期限を指定することができます。
2. On-demand Revalidation
   revalidatePathや、revalidateTagを使用することでキャッシュを更新することができます。

Full Route Cache

Next.jsは自動でビルド時にルートをレンダリングし、キャッシュを作成します。 これは毎回リクエストをサーバーでレンダリングする代わりにルートのキャッシュを提供することで最適化を計り、ページの読み込み時間を短縮します。 Full Route Cacheを理解するには、Reactがレンダリングをどのように処理しているか、そして、Next.jsが結果をどのようにキャッシュしているかを理解する必要があります。

1. サーバーでのReactのレンダリング

サーバーで、Next.jsはReactのAPIを使用してレンダリングを行います。 このレンダリングは2つのステップに分かれています。

1. React Server Components Payloadを生成するため、Reactがサーバーコンポーネントをレンダリングして、特殊なデータのフォーマットに変換します。
2. Next.jsがReact Server Components Payloadと、クライアントコンポーネントを使ってサーバーでHTMLを生成します。

2. サーバーでのNext.jsのキャッシュ

Next.jsはデフォルトでReact Server Components PayloadとHTMLの結果をキャッシュしています。 これは静的にレンダリングされたルートにビルド時や、再バリデーション時にキャッシュが作成されます。

3. クライアントでのRaectのハイドレーションと、再構築

クライアントサイドでは以下の手順でサーバーから生成されたReact Server Components PayloadとHTMLを使用します。

1. HTMLは初期画面として、即座に表示されます
2. React Server Components Payloadはクラインとと、サーバーコンポーネントのツリーを調整し、DOMを更新するために使用されます。
3. Javascriptのコードはクライアントコンポーネントをハイドレートし、アプリケーションをインタラクティブにするために使用されます。

4. クライアントでのNext.jsのキャッシュ(Router Cache)

React Server Components PayloadはクライアントサイドのRouter Cacheにキャッシュされます。 Router Cacheは前に訪れたルートや、Link先のページを事前フェッチすることで、ページ遷移のパフォーマンスを向上させます。

静的ルートと、動的ルートの挙動の違い

静的ルートはビルド時にFull Route Cacheが作成されますが、動的ルートは初めてページが読み込まれたときにFull Route Cacheが作成されます。

Router Cache

Router Cacheはインメモリのクライアントサイドのキャッシュです。 レイアウト、ローディング、ページに別れたそれぞれのRSC Payload(React Server Components Payload)を保持します。 ページはデフォルトではキャッシュされませんが、ブラウザーの戻るや、進むボタンを使用したときに、キャッシュが使用されます。 ページでもキャッシュを利用するには、staleTimes オプションを設定します。

関連資料

• サーバーコンポーネント