TL;DR
Next.js の 4 種類のキャッシュの 1 つ。fetch で取得したデータを、更新されるまでリクエストやデプロイをまたいで返し続ける永続的なキャッシュである。
なぜ必要か
同じデータを何度も取得元から取り直さずに済む。Request Memoization が 1 回のレンダリングの間しか結果を保持しないのに対し、Data Cache は永続的に保持する。
仕組み
サーバサイドのレンダリング中に fetch が呼ばれると、次の順に動く。
- Request Memoization と Data Cache を順に確認し、どちらにもなければ実際にリクエストする
- レスポンスを Request Memoization と Data Cache に保存し、呼び出し元に返す
- 次の
fetchに{ cache: 'no-store' }が付いていれば、Data Cache の確認を飛ばす。このときはオプションが異なるので、Request Memoization もキャッシュを返さない
fetch の第 2 引数に next.revalidate を指定すると、キャッシュの有効期限を秒単位で決められる。デフォルトは false で、期限なしでキャッシュし続ける。
fetch("https://...", { next: { revalidate: 3600 } })このようにキャッシュを更新する操作を Revalidate という。有効期限で更新するものを Time-based Revalidation、任意のタイミングで更新するものを On-demand Revalidation と呼ぶ。
fetch 以外で同じ挙動を実現したい場合は、unstable_cache を使う。
注意点
Next.js 14 まではデフォルトで有効だったが、15 からはデフォルトで無効になった。14 以前と同じようにキャッシュするには、第 2 引数で指定する。
fetch("https://...", { cache: "force-cache" })Request Memoization とは目的も違う。Request Memoization は React のコンポーネントツリーの中でデータを再利用するためのもので、Route Handler の中では動かないといった制約がある。