コンテンツにスキップ
Configurationnext.config.jsserverComponentsHmrCache

serverComponentsHmrCache

この機能は現在実験的であり、変更される可能性があります。本番環境での使用は推奨されません。お試しいただき、GitHubでフィードバックをお寄せください。

実験的な serverComponentsHmrCache オプションを使用すると、ローカル開発でのホットモジュールリプレイスメント（HMR）リフレッシュ全体で、Server Components の fetch レスポンスをキャッシュできます。これにより、レスポンスが高速化され、請求対象となる API コールのコストが削減されます。

デフォルトでは、HMR キャッシュは cache: 'no-store' オプションを含むすべての fetch リクエストに適用されます。これは、キャッシュされていないリクエストは HMR リフレッシュ間で最新のデータを表示しないことを意味します。ただし、ナビゲーションまたはフルページリロード時にキャッシュはクリアされます。

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

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // defaults to true
  },
}
 
export default nextConfig

知っておくと便利: 監視性を高めるために、開発中にコンソールで fetch のキャッシュヒットとミスをログに記録する logging.fetches オプションを使用することをお勧めします。