T-CREATOR

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

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

Next.jsでは、fetch() における キャッシュの設定 がアプリの性能と動作に大きく影響します。特にApp Routerでの開発時は、デフォルトの動作を正しく理解しておくことで、不要なAPIリクエストや表示のラグを防げます。


fetchのキャッシュ戦略一覧

cache オプション説明使うべきケース
force-cache常にキャッシュを使う(デフォルト)静的データを取得する時
no-storeキャッシュせず、常にネットワークアクセス毎回最新のデータが必要な時
reloadブラウザのキャッシュを使わず、サーバー再取得手動で明示的に使う特殊ケース
defaultfetch実行元の環境に依存(Serverならforce-cacheApp 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' 相当だが、再取得タイミングを設定できるのが利点。

cachenextオプションの違いと併用例

オプション用途
cachefetchのキャッシュ挙動cache: 'no-store'
next.revalidateISRの再取得間隔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

もっと見る