Next.jsにおけるfetchのcacheの違いを紹介

Next.jsでは、fetch()
における キャッシュの設定 がアプリの性能と動作に大きく影響します。特にApp Routerでの開発時は、デフォルトの動作を正しく理解しておくことで、不要なAPIリクエストや表示のラグを防げます。
fetchのキャッシュ戦略一覧
cache オプション | 説明 | 使うべきケース |
---|---|---|
force-cache | 常にキャッシュを使う(デフォルト) | 静的データを取得する時 |
no-store | キャッシュせず、常にネットワークアクセス | 毎回最新のデータが必要な時 |
reload | ブラウザのキャッシュを使わず、サーバー再取得 | 手動で明示的に使う特殊ケース |
default | fetch実行元の環境に依存(Serverならforce-cache ) | App Routerでは明示したほうが安全 |
only-if-cached | キャッシュにある場合のみ使用。失敗することもある | 実験用途に近い |
App Routerでの挙動とデフォルトの落とし穴
Next.js 13以降のApp Routerでは、fetch()
は基本的にビルド時の静的キャッシュ(Static Generation)を使います。これは以下のようなコードでも同様です:
ts// app/page.tsx
export default async function Page() {
const res = await fetch('https://example.com/api/data');
const data = await res.json();
return <pre>{JSON.stringify(data)}</pre>;
}
上記コードは、デフォルトで force-cache
が適用され、example.com
のデータは ビルド時に1回だけ取得され、以後キャッシュされます。
具体例①:常に最新のデータが必要なケース
tsexport default async function Dashboard() {
const res = await fetch('https://api.example.com/stats', {
cache: 'no-store'
});
const stats = await res.json();
return <div>{stats.visitorCount}</div>;
}
- リアルタイムなアクセス数などを表示したい場合に適しています。
- キャッシュを使わないため、リクエストは常にAPIへ直接飛びます。
- ISR(Incremental Static Regeneration)ではなく、SSR的な動作になります。
具体例②:静的なブログ記事の取得
tsexport default async function BlogList() {
const res = await fetch('https://cms.example.com/posts', {
next: { revalidate: 3600 } // 1時間ごとに再取得
});
const posts = await res.json();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
revalidate
により、ISRが有効化され、キャッシュとリアルタイム取得の良いとこ取りができます。- 再生成のタイミングを指定可能。
cache: 'force-cache'
相当だが、再取得タイミングを設定できるのが利点。
cache
とnext
オプションの違いと併用例
オプション | 用途 | 例 |
---|---|---|
cache | fetchのキャッシュ挙動 | cache: 'no-store' |
next.revalidate | ISRの再取得間隔 | next: { revalidate: 10 } |
ts// ISRで動的なリビルドが必要なとき
await fetch('https://api.example.com/articles', {
next: { revalidate: 60 }
});
よくある落とし穴
no-store
を使わないと、再デプロイしない限りデータが更新されないことがある- App Routerでは**
getServerSideProps
は使えない**ので、fetch時の設定がSSR/SSGを分ける鍵になる cache: 'no-store'
を連発すると、API呼び出しが多くなり、パフォーマンスに悪影響を与える可能性がある
まとめ:キャッシュ戦略選びの指針
ケース | 推奨設定 |
---|---|
毎回最新の情報が必要 | cache: 'no-store' |
頻繁に変わらないが定期的に更新される | next: { revalidate: 秒数 } |
完全に静的(例:マークダウン記事) | デフォルト(force-cache ) |
Next.jsのfetchは非常に柔軟で、キャッシュ戦略を適切に使い分けることでパフォーマンスと鮮度のバランスが取れるよう設計されています。
用途に応じた最適な設定を行うことで、UXとSEOの両立も実現できます。
記事Article
もっと見る- article
NestJSでバリデーションエラーをログ出力する設定を紹介
- article
NestJSで作成したAPIのレスポンスヘッダーに付与されるx-powered-by: Express を消す方法を紹介
- article
Next.jsで環境変数に別の変数を利用し柔軟に管理するdotenv-expandの活用法を紹介
- article
【2025年3月版】Cursor ProとAPI利用比較。 Claude・GPT-4o・o1・GPT-4.5の損益分岐点と選び方
- article
フォーム入力情報からZodを利用してDTO作成しへ変換処理を実施するやり方を紹介
- article
Zodバリデーションのエラーメッセージを日本語化すやり方を紹介