← Next.js コース
16. use cache — v16のキャッシュの仕組み
Next.js 16 では Cache Components という仕組みが中心になりました。これを有効(next.config.ts に cacheComponents: true)にすると、デフォルトでは何もキャッシュされず動的に動きます。そのうえで、キャッシュしたい関数やコンポーネントの先頭に "use cache" と書いた箇所だけが保存される、という分かりやすい方式です。以前の「fetch が自動でキャッシュされる」挙動とは逆向きなので、古い記事との違いに注意してください。
"use cache" は、データを取る関数の先頭にも、コンポーネントやページの先頭にも書けます。保存期間は cacheLife('hours') のように名前付きプロファイルで指定し、cacheTag('products') でタグを付けておくと、更新時に Server Action から updateTag('products') を呼んでそのキャッシュだけを狙って無効化できます。
つまずきやすいのは、"use cache" を付けた関数の中では cookies() や headers() などリクエスト依存の値を直接読めない点です。これらは外側で読み取り、引数として渡すのが基本です(渡した引数はキャッシュのキーの一部になります)。「共通で使い回せる結果はキャッシュ、ユーザー固有の動的な部分は外」と切り分けるのがコツです。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// next.config.ts で Cache Components を有効にする:
// const nextConfig: NextConfig = { cacheComponents: true };
// app/lib/data.ts — データ取得関数をキャッシュする
import { cacheLife, cacheTag } from "next/cache";
export async function getProducts() {
"use cache"; // この関数の戻り値をキャッシュする
cacheLife("hours"); // 保存期間のプロファイル
cacheTag("products"); // 後で狙って無効化するためのタグ
const res = await fetch("https://api.example.com/products");
return res.json();
}
// app/actions.ts — 更新時にタグを指定してキャッシュを無効化する
// "use server";
// import { updateTag } from "next/cache";
// export async function onProductChanged() {
// updateTag("products"); // "products" のキャッシュだけ作り直す
// }