Menu

cacheComponents

cacheComponents 标志是 Next.js 中的一个功能,它会导致 App Router 中的数据获取操作被排除在预渲染之外,除非它们被显式缓存。这对于优化 Server Components 中动态数据获取的性能非常有用。

如果你的应用程序需要在运行时获取新鲜数据,而不是从预渲染缓存中提供服务,那么它会很有用。

它预期与 use cache 结合使用,这样你的数据获取默认在运行时进行,除非你使用 use cache 在页面、函数或组件级别定义应用程序的特定部分进行缓存。

用法

要启用 cacheComponents 标志,请在你的 next.config.ts 文件中将其设置为 true:

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true,
}
 
export default nextConfig

cacheComponents 启用时,你可以使用以下缓存函数和配置:

注意事项

  • 虽然 cacheComponents 可以通过确保在运行时获取新鲜数据来优化性能,但与提供预渲染内容相比,它也可能会引入额外的延迟。

版本历史

版本变更
16.0.0cacheComponents 引入。此标志将 ppruseCachedynamicIO 标志作为单一统一配置进行控制。