Next.js データの取得に関するキャッシュの問題

導入

アプリケーションの構築中に 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 のデフォルトのキャッシュ動作をオーバーライドするのに役立ちます

以上がNext.js データの取得に関するキャッシュの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。