【Next.js】App Router で使用できるキャッシュまとめ

弊社エンジニアの記事になります。

はじめに

今回は Next.js の App Router で使えるキャッシュの理解をざーっと深めていきたいと思います！

というのも App Router で Pages Router より細かなキャッシュ戦略を使用することができそうだとは思っていたのですが、細かくどんなことができるのかまでは確認していませんでした。

最近リリースされた Next.js v14.1 では、今まで各 Next.js サーバーのファイルシステム（ディスク）にしか保存することができなかったキャッシュの保存先を、Redis や AWS S3 などに設定することができるようになりました。そのため、クラウドサービスを使用したサーバーインスタンス数をスケールアウトさせるケースなどにも各インスタンス間でキャッシュを共有することが可能になりました。

このようにNext.jsでのキャッシュ周りの利便性が高くなってきていますので、今一度 Next.js の App Router で使用できるキャッシュをまとめてみようと思います！

App Router で使用できるキャッシュの種類は４種類

App Router で使用できるキャッシュの種類は下記４つになります。( Next.js 公式サイトから抜粋 )

MechanismWhatWherepurposeDurationRequest MemoizationReturn values of functionsServerRe-use data in a React Component treePer-request lifecycleData CacheDataServerStore data across user requests and deploymentsPersist (can be revalidated)Full Route CacheHTML and RSC payloadServerReduce rendering cost and improve performancePersist (can be revalidated)Router CacheRSC PayloadClientReduce server requests on navigationUser session or time-based

それぞれ、クライアントでのキャッシュかサーバー側でのキャッシュかで分かれています。

では一つずつ確認していきましょう。

Request Memoization

これは 1 サーバーリクエストごとのキャッシュになります。

1 サーバーリクエスト間で複数回、React Component Tree の様々な場所で同じ URL に同じオプションで fetch リクエストを行っていても、React が fetch の結果をキャッシュしてくれるためキャッシュ生成後のリクエストは全て実際にリクエストを飛ばさずキャッシュの値を自動的に使用してくれます。そのため、パフォーマンスのことを考えて Top のコンポーネントからリクエストを飛ばし、そのデータを実際に使用する子コンポーネントに橋渡ししていくなどといった必要がなくなります。

そして 1 サーバーリクエスト間でのキャッシュであるため、レンダリングが完了すると全ての Request Memoization はクリアされます。

＊注意
Request Memoization は fetch を使用した GET リクエストにしか適用されません。
（Graphql クライアントなどを使用していて fetch を利用していない場合、react の cache function を使用することでデータのキャッシュが行えます。）

Request Memoization の流れ

( Next.js 公式サイトから抜粋 )

キャッシュの無効化

AbortController の signal を使用することで、キャッシュを無効化できます。

const { signal } = new AbortController()
fetch(url, { signal })

Data Cache

Data Cache は fetch を利用して取得したデータを、Next.js サーバーへのリクエスト、デプロイメント間に渡ってキャッシュ化し永続化します。デプロイメント間に渡って永続化されるというのは、ビルドを行なって新しいバージョンを作成したとしても、キャッシュのデータは引き継がれるということです。

…