cacheComponents
cacheComponents 标志是 Next.js 中的一个功能,它会导致 App Router 中的数据抓取操作被排除在预渲染之外,除非它们被显式缓存。这对于优化服务器组件中动态数据抓取的性能非常有用。
如果您的应用程序在运行时需要抓取新鲜数据而不是从预渲染缓存中提供服务,这将非常有用。
它预期与 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 启用时,您可以使用以下缓存函数和配置
use cache指令- 与
use cache结合使用的cacheLife函数 cacheTag函数
注意
- 虽然
cacheComponents可以通过确保运行时抓取新鲜数据来优化性能,但与提供预渲染内容相比,它也可能引入额外的延迟。
版本历史
| 版本 | 更改 |
|---|---|
| 16.0.0 | 引入 cacheComponents。此标志将 ppr、useCache 和 dynamicIO 标志作为单一统一配置进行控制。 |
这有帮助吗?