mizulba
1年以上前
0
Next.js App Routerのfetchキャッシュ仕様
Next.js
フロントエンド
知識
運用
基本動作
- デフォルト設定: fetchリクエストは永続的にキャッシュされる
- 重複排除: 同じURLとオプションを持つリクエストは自動的に重複排除される
- 静的レンダリング: データフェッチを含むルートはデフォルトで静的にレンダリングされる
キャッシュ制御オプション
typescript
// デフォルト: 永続キャッシュ
fetch('https://api.example.com/data')
// キャッシュ無効化
fetch('https://api.example.com/data', { cache: 'no-store' })
// 再検証間隔設定（10秒ごと）
fetch('https://api.example.com/data', { next: { revalidate: 10 } })
// タグベース再検証
fetch('https://api.example.com/data', { next: { tags: ['tag-name'] } })再検証方法
-
時間ベース再検証
next: { revalidate: 秒数 }で指定した間隔で自動再検証
-
オンデマンド再検証
revalidatePath('/path')- 特定のパスのキャッシュを再検証revalidateTag('tag-name')- 特定のタグのキャッシュを再検証
-
ルートハンドラーでの再検証
- フォーム送信などのイベント後にデータを再検証
実装パターン例
typescript
// 常に最新データを取得（キャッシュなし）
export async function getDynamicData() {
return fetch('https://api.example.com/dynamic-data', { cache: 'no-store' });
}
// 定期的に更新（1時間ごと）
export async function getSemiDynamicData() {
return fetch('https://api.example.com/semi-dynamic', {
next: { revalidate: 3600 }
});
}
// タグベース再検証用
export async function getTaggedData() {
return fetch('https://api.example.com/tagged-data', {
next: { tags: ['my-data'] }
});
}
// Server Actionでの再検証
'use server'
import { revalidateTag } from 'next/cache';
export async function updateData(data) {
await saveData(data);
revalidateTag('my-data');
}ユースケース別推奨設定
- 頻繁に変更されるデータ:
cache: 'no-store' - 定期的に更新されるデータ:
next: { revalidate: 秒数 } - 更新イベントがあるデータ:
next: { tags: ['タグ名'] }+revalidateTag() - 静的データ: デフォルト（キャッシュオプションなし）