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

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

它通常与 use cache 伪指令 结合使用，这样您的数据获取默认在运行时进行，除非您在页面、函数或组件级别使用 use cache 定义了应用程序的特定部分需要缓存。

用法

要启用 cacheComponents 标志，请在您的 next.config.ts 文件中将其设置为 true：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

启用 cacheComponents 后，您可以使用以下缓存函数和配置：

• use cache 伪指令
• cacheLife 函数 与 use cache 结合使用
• cacheTag 函数

注意事项

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

版本历史