serverComponentsHmrCache

实验性的 serverComponentsHmrCache 选项允许你在本地开发中的热模块替换 (HMR) 刷新中缓存服务器组件中的 fetch 响应。这可以加快响应速度并降低计费 API 调用的成本。

¥The experimental serverComponentsHmrCache option allows you to cache fetch responses in Server Components across Hot Module Replacement (HMR) refreshes in local development. This results in faster responses and reduced costs for billed API calls.

默认情况下，HMR 缓存适用于所有 fetch 请求，包括带有 cache: 'no-store' 选项的请求。这意味着未缓存的请求不会在 HMR 刷新之间显示新数据。但是，在导航或整页重新加载时，缓存将被清除。

¥By default, the HMR cache applies to all fetch requests, including those with the cache: 'no-store' option. This means uncached requests will not show fresh data between HMR refreshes. However, the cache will be cleared on navigation or full-page reloads.

你可以通过在 next.config.js 文件中将 serverComponentsHmrCache 设置为 false 来禁用 HMR 缓存：

¥You can disable the HMR cache by setting serverComponentsHmrCache to false in your next.config.js file:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // defaults to true
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // defaults to true
  },
}

module.exports = nextConfig

很高兴知道：为了获得更好的可观察性，我们建议使用 logging.fetches 选项，该选项在开发期间在控制台中记录获取缓存命中和未命中。

¥Good to know: For better observability, we recommend using the logging.fetches option which logs fetch cache hits and misses in the console during development.