Next.js の fetch 拡張
Next.js は Web 標準の fetch を拡張し、cache / next.revalidate / next.tags オプションでキャッシュ挙動を制御できます。
// 永続キャッシュ（ビルド時に生成・以降は再フェッチしない）
fetch(url, { cache: 'force-cache' });
// ISR（指定秒数ごとに再検証）
fetch(url, { next: { revalidate: 60 } });
// タグ付きキャッシュ（revalidateTag で即時無効化）
fetch(url, { next: { tags: ['posts'] } });
// キャッシュしない（毎回最新を取得）
fetch(url, { cache: 'no-store' });
キャッシュオプション一覧
| オプション | 挙動 | 向いている場面 |
|---|---|---|
cache: 'force-cache' | 永続キャッシュ。再デプロイまで再フェッチしない | 滅多に変わらない静的コンテンツ |
next: { revalidate: N } | N 秒ごとにバックグラウンドで再検証（ISR） | 更新頻度が低いが定期的に最新を反映したい |
next: { tags: [...] } | タグを付けてキャッシュ。revalidateTag で即時無効化 | CMS 更新・操作トリガーで特定データを更新したい |
cache: 'no-store' | キャッシュしない。毎回最新を取得 | リアルタイム性が必要・ユーザー固有データ |
Next.js 15 のデフォルト変更
Next.js 14 以前と 15 以降でデフォルト挙動が変わっています。
| バージョン | fetch デフォルト |
|---|---|
| Next.js 14 以前 | force-cache（キャッシュあり） |
| Next.js 15 以降 | no-store（キャッシュなし） |
Next.js 15 ではキャッシュを有効にしたい場合に明示的な指定が必要です。
// Next.js 15 でキャッシュを使う場合は明示的に指定する
fetch(url, { cache: 'force-cache' });
fetch(url, { next: { revalidate: 60 } });
revalidateTag と組み合わせる
next.tags を設定すると revalidateTag() でそのデータのキャッシュを即時無効化できます。
// fetch 側: タグを付けてキャッシュ
const posts = await fetch('/api/posts', {
next: { tags: ['posts'] },
});
// Server Action 側: タグを指定して無効化
import { revalidateTag } from 'next/cache';
export async function createPostAction(formData: FormData) {
await db.post.create({ data: { ... } });
revalidateTag('posts'); // 'posts' タグのキャッシュをクリア
}
no-store（キャッシュしない指定）の詳細は → cache: 'no-store'
キャッシュ設計の全体像は → Next.js キャッシュ設計