serverComponentsHmrCache

実験的機能のserverComponentsHmrCacheオプションを使用すると、ローカル開発中にServer ComponentのHot Module Replacement（HMR）更新をまたいでfetch応答をキャッシュできます。これにより、応答速度が向上し、課金されるAPI呼び出しのコストが削減されます。

デフォルトでは、HMRキャッシュはcache: 'no-store'オプションを指定されたものを含むすべてのfetch要求に適用されます。これにより、キャッシュされていない要求はHMR更新の間に新しいデータを表示しなくなります。ただし、ナビゲーションまたはページ全体のリロード時にはキャッシュがクリアされます。

next.config.jsファイルでserverComponentsHmrCacheをfalseに設定してHMRキャッシュを無効にすることができます：

TypeScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // デフォルトはtrue
  },
}

export default nextConfig

JavaScript

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // デフォルトはtrue
  },
}

module.exports = nextConfig

Good to know: より良い可観測性のために、開発中にコンソールでfetchのキャッシュヒットとミスを記録するlogging.fetchesオプションを使用することをお勧めします。