serverComponentsHmrCache
この実験的な serverComponentsHmrCache
オプションを使用すると、ローカル開発環境においてサーバーコンポーネント内の fetch
レスポンスをHot Module Replacement (HMR) 更新間でキャッシュできます。これにより、レスポンス速度が向上し、課金対象のAPIコールコストを削減できます。
デフォルトでは、HMRキャッシュは cache: 'no-store'
オプションを含むすべての fetch
リクエストに適用されます。つまり、キャッシュされていないリクエストはHMR更新間で最新データを表示しません。ただし、ナビゲーションやフルページリロード時にはキャッシュはクリアされます。
HMRキャッシュを無効にするには、next.config.js
ファイルで serverComponentsHmrCache
を false
に設定します:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
serverComponentsHmrCache: false, // デフォルトはtrue
},
}
export default nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverComponentsHmrCache: false, // デフォルトはtrue
},
}
module.exports = nextConfig
補足: 可観測性を向上させるため、開発中にコンソールでフェッチキャッシュのヒットとミスをログ出力する
logging.fetches
オプションの使用を推奨します。