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）を使います。これは以下のようなコードでも同様です：

tsCopy code// 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回だけ取得され、以後キャッシュされます。

---

具体例①：常に最新のデータが必要なケース

tsCopy codeexport 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的な動作になります。

---

具体例②：静的なブログ記事の取得

tsCopy codeexport 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 }

tsCopy code// 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の両立も実現できます。