用途:该指南介绍 Next.js 16+ 的 Cache Components,通过开启 cacheComponents 实现部分预渲染(PPR),在同一路由中混合静态、缓存和动态内容。开启方式是在 next.config.ts 中设置 cacheComponents: true,替代旧的 experimental.ppr。
主要能力:内容分三类——静态(同步代码、导入、纯计算,构建时预渲染)、缓存(异步数据加 'use cache')、动态(必须实时的运行时数据,用 Suspense 包裹)。'use cache' 可作用于文件、组件和函数级别。缓存可通过 cacheLife() 设置生命周期,内置 profile 有 default、minutes、hours、days、weeks、max,也支持内联配置 stale、revalidate、expire。失效可用 cacheTag() 打标签,updateTag() 在同一请求内立即失效,revalidateTag() 做后台重新验证。
使用方式:use cache 内不能访问 cookies()、headers()、searchParams,需要把运行时数据提取到外层作为参数传入,参数会成为缓存键的一部分;若无法重构,可改用 'use cache: private'。缓存键自动生成,包含构建 ID、函数 ID、可序列化参数和闭包变量。迁移方面:experimental.ppr 换成 cacheComponents;dynamic='force-static' 换成 'use cache' + cacheLife('max');revalidate=N 换成 cacheLife({ revalidate: N });unstable_cache 换成 use cache 指令,不再需要手动 keyParts,tags 改用 cacheTag(),revalidate 改用 cacheLife()。
限制:不支持 Edge runtime,需要 Node.js;不支持静态导出;use cache 内的非确定值(如 Math.random()、Date.now())只在构建时执行一次,若需要请求时随机可用 connection() 延迟到请求时执行。