用途:在 Next.js 16+ 中启用 Cache Components,实现部分预渲染(PPR),让同一路由同时包含静态、缓存和动态内容。
启用方式:在 next.config.ts 中设置 cacheComponents: true,替代旧的 experimental.ppr 标志。
三类内容:静态内容(同步代码、导入、纯计算)在构建时预渲染;缓存内容用 'use cache' 标记异步数据;动态内容需用 Suspense 包裹,在请求时流式输出。
use cache 指令:可用于文件级、组件级或函数级。缓存配置用 cacheLife(),支持内置档位 default、minutes、hours、days、weeks、max,也可内联设置 stale、revalidate、expire。缓存失效用 cacheTag() 打标签,updateTag() 在同一请求内立即失效,revalidateTag() 做后台重新验证。
限制:use cache 内不能访问 cookies()、headers() 或 searchParams,需在外部取出后作为参数传入;例外是 'use cache: private'。缓存键自动由构建 ID、函数 ID、可序列化参数和闭包变量生成。不支持 Edge 运行时和静态导出,需 Node.js 与服务端。Math.random()、Date.now() 等非确定性值在 use cache 内只在构建时执行一次,请求时随机需用 connection() 延迟到请求阶段。
迁移:experimental.ppr 改为 cacheComponents: true;dynamic = 'force-static' 改为 'use cache' + cacheLife('max');revalidate = N 改为 cacheLife({ revalidate: N });unstable_cache() 改为 use cache 指令,不再需要手动 cache keys 和 keyParts,tags 改用 cacheTag(),revalidate 改用 cacheLife()。