用途:Cache Components 是 Next.js 16+ 的缓存机制,启用部分预渲染(PPR),让同一条路由同时包含静态、缓存和动态内容。需在 next.config.ts 中设置 cacheComponents: true,替代旧的 experimental.ppr。
内容类型:1)静态内容由构建时同步代码与计算自动预渲染;2)缓存内容用 'use cache' 指令配合 cacheLife 标注异步数据;3)动态内容需运行时数据,用 Suspense 包裹实现流式输出。
主要能力:'use cache' 可作用于文件、组件或函数级别。缓存配置支持内置档位 'default'、'minutes'、'hours'、'days'、'weeks'、'max',也可用 cacheLife 传入 stale、revalidate、expire 内联参数。缓存失效方面,cacheTag 用于给缓存打标签,updateTag 在同一请求内立即失效,revalidateTag 用于后台的 stale-while-revalidate。缓存键自动由 Build ID、函数 ID、可序列化参数及闭包变量生成。
使用方式:在需要缓存的异步函数顶部写 'use cache',按需调用 cacheLife 和 cacheTag;服务端动作中调用 updateTag 或 revalidateTag 做失效。运行时 API 约束:不能在 use cache 内访问 cookies()、headers()、searchParams,需在外部取出后作为参数传入;'use cache: private' 例外,允许访问运行时 API。
迁移:experimental.ppr 改为 cacheComponents: true;dynamic = 'force-static' 改为 'use cache' + cacheLife('max');revalidate = N 改为 cacheLife({ revalidate: N });unstable_cache() 改为 use cache,不再需要手动 cache key 与 keyParts。
限制:不支持 Edge runtime,需要 Node.js;不支持静态导出,需要服务端;use cache 内的非确定性值(如 Math.random()、Date.now())只在构建时执行一次,如需请求时随机可调用 next/server 的 connection()。文档未提供收费、价格或平台相关信息。