用途:这是一套面向 Next.js 16 App Router 的 Partial Prerendering(PPR)规则集,针对 Cache Components 模型下静态页面外壳与个性化、实时或按请求内容混排的场景,用于在写代码或审查代码时做决策。包含 6 类共 21 条规则,按由易到难排列:setup-(启用 PPR)、shell-(Suspense 边界)、cache-('use cache' 缓存)、runtime-(运行时 API 与非确定性)、compose-(页面组合)、mutate-(表单、变更与向导)。每条规则纠正模型默认沿用 Next.js 14/15 时的错误默认行为。
主要能力:讲解通过 cacheComponents: true 启用 PPR,并说明 experimental.ppr 与 export const experimental_ppr 路由导出已被移除;说明动态优先、缓存需经 'use cache' 显式启用的心智模型;把 <Suspense> 作为静态外壳与动态流的接缝,处理 Uncached data was accessed outside of <Suspense> 构建错误;缓存键由参数与闭包自动生成,缓存作用域内不能读取 cookies()/headers(),需作为 props 传入;cacheLife 控制 TTL、cacheTag 支持按需失效;异步 cookies/headers/searchParams/params 会强制产生动态边界,generateStaticParams 可让 [slug] 路由留在静态外壳中,随机与时间需用 connection() 包住或缓存;组合上给出单洞、并行洞、以 use() 解包未 await 的 Promise 等方案;变更方面区分 updateTag、revalidateTag 与 refresh(),并给出 URL 驱动的向导步骤与 <Activity> 字段保留。同时说明内存缓存在 serverless 上不持久,需用 'use cache: remote'。
使用方式:相关决策出现时阅读对应规则文件;从零开始时先读 setup-。规则用于编写 PPR,无法判断实际渲染结果,需借助 references/_debug-boundaries.md,用 next build 与通过 mcporter 调用的 chrome-devtools-mcp 对照静态外壳与已水合 DOM 来定位动态空洞。
适用场景与限制:适用于构建或审查混合静态与动态内容的 Next.js 16 页面、启用或迁移 PPR、决定 Suspense 边界位置、添加缓存与处理变更后失效、组合表单与仪表盘。该技能版本特定,面向 Next.js 16(PPR 经 cacheComponents,React 19.2),不适用于 Next.js 14/15 的实验性写法;现有应用的迁移需参考迁移指南。收费、价格等暂未提供。