導入

アプリケーションの構築中に Next.js でよくあるキャッシュの問題は、Next.js のデフォルトのキャッシュ動作であり、多くの開発者にとってフラストレーションの原因となっています。多くの場合、キャッシュはリソースのコピーを保存することでページの読み込みを高速化し、サーバーの負荷を軽減します。
ただし、古いコンテンツが表示される場合があり、追加時に新しいブログが表示されるブログ フィードのような動的アプリケーションでは問題になる可能性があります。

データキャッシュのオプトアウト

Next.js はネイティブ Web fetch() API を拡張して、サーバー上の各リクエストが独自の永続キャッシュ セマンティクスを設定できるようにします。

個々のフェッチ リクエストのキャッシュをオプトアウトするには、フェッチのキャッシュ オプションを「no-store」に設定します。これにより、リクエストごとにデータが動的に取得されます。

export default async function Page() {

  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
  const data = await dynamicData.json()
}

これは、Next.js のデフォルトのキャッシュ動作をオーバーライドするのに役立ちます