serverComponentsHmrCache

実験的な serverComponentsHmrCache オプションは、ローカル開発において、Hot Module Replacement (HMR) のリフレッシュ全体で Server Component 内の 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 オプションの使用を推奨します。