用途:该技能面向 Next.js 16+ 的 Cache Components 能力,用于在单个路由中混合静态、缓存与动态内容,实现部分预渲染(PPR)。
主要能力:启用方式为在 next.config.ts 中设置 cacheComponents: true,替代旧的 experimental.ppr 标志。内容分为三类:静态内容在构建时预渲染;缓存内容通过 "use cache" 指令标记,可配合 cacheLife 设置生命周期;动态内容需用 Suspense 包裹以流式输出。use cache 可作用于文件、组件或函数级别,并支持 "use cache: remote" 与 "use cache: private" 等配置。cacheLife 支持内置档位(default、minutes、hours、days、weeks、max)或内联配置 stale、revalidate、expire。缓存失效通过 cacheTag 打标签,updateTag 用于同一请求内立即失效,revalidateTag 用于后台重新验证。缓存键自动基于构建 ID、函数 ID、可序列化参数与闭包变量生成。
使用方式:在需要缓存的异步函数或组件内声明 "use cache",按需调用 cacheLife 与 cacheTag;在 Server Action 中调用 updateTag 或 revalidateTag 触发失效。
限制:use cache 内不能访问 cookies()、headers() 或 searchParams,需在外部提取后作为参数传入,或改用 "use cache: private"。不支持 Edge 运行时与静态导出,需要 Node.js 与服务端。Math.random()、Date.now() 等非确定性值在 use cache 内只在构建时执行一次,如需请求时随机性可用 next/server 的 connection()。
迁移:experimental.ppr 改为 cacheComponents: true;dynamic = 'force-dynamic' 可移除;dynamic = 'force-static' 改用 'use cache' 加 cacheLife('max');revalidate = N 改用 cacheLife({ revalidate: N });unstable_cache() 改用 'use cache' 指令。