cacheComponents

cacheComponents 标志是 Next.js 中的一项功能，它会导致应用路由中的数据获取操作在预渲染中被排除，除非它们被显式缓存。这对于优化服务器组件中动态数据获取的性能非常有用。

¥The cacheComponents flag is a feature in Next.js that causes data fetching operations in the App Router to be excluded from pre-renders unless they are explicitly cached. This can be useful for optimizing the performance of dynamic data fetching in Server Components.

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

¥It is useful if your application requires fresh data fetching during runtime rather than serving from a pre-rendered cache.

它预计会与 use cache 结合使用，这样除非你在页面、函数或组件级别定义要使用 use cache 缓存的应用特定部分，否则默认情况下数据提取会在运行时进行。

¥It is expected to be used in conjunction with use cache so that your data fetching happens at runtime by default unless you define specific parts of your application to be cached with use cache at the page, function, or component level.

用法

¥Usage

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

¥To enable the cacheComponents flag, set it to true in your next.config.ts file:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

启用 cacheComponents 后，你可以使用以下缓存功能和配置：

¥When cacheComponents is enabled, you can use the following cache functions and configurations:

• use cache 指令

  ¥The use cache directive

• cacheLife 功能 和 use cache

  ¥The cacheLife function with use cache

• cacheTag 功能

  ¥The cacheTag function

注意

¥Notes

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

  ¥While cacheComponents can optimize performance by ensuring fresh data fetching during runtime, it may also introduce additional latency compared to serving pre-rendered content.

版本历史

¥Version History

版本	更改
16.0.0	cacheComponents 已引入。此标志将 ppr、useCache 和 dynamicIO 标志作为一个统一的配置进行控制。