Next.js 写缓存组件还在靠感觉？Vercel 官方 Skill 来救场了

Next.js 写缓存组件还在靠感觉？Vercel 官方 Skill 来救场了

做 Next.js 开发的同学，最近有没有被 `cacheComponents: true` 这个配置折腾过？

说实话，Next.js 的 Cache Components 和 Partial Prerendering（PPR）刚出来那会儿，我也踩了不少坑。`use cache` 什么时候用？`cacheLife()` 怎么配？`cacheTag()` 和 `updateTag()` 区别是啥？官方文档写得很详细，但真正写业务代码的时候，对不上号啊。

直到我发现了 Vercel 官方出的这个 next-cache-components-optimizer Skill。

这 Skill 到底干嘛的

简单说，它就是一个 Next.js 缓存体系的「实战手册」。当你的项目里配置了 cacheComponents: true，这个 Skill 会自动激活，开始全程指导你：

• 什么时候该用 use cache — 不是所有地方都要缓存，它会告诉你怎么判断静态 vs 动态内容的边界
• cacheLife() 怎么配生命周期 — 缓存多久、什么时候该失效，给出具体数值建议
• cacheTag() 如何打标签 — 数据关联的缓存怎么批量失效
• updateTag()/revalidateTag() 什么时候用 — 手动刷新的正确姿势
• 常见缓存问题 Debug — 缓存不生效、页面闪一下、CDN 命中失败，都能找到原因

接入方式

用 skills 命令直接装（支持 Claude Code、Cursor、GitHub Copilot 等主流 Agent）：

npx skills add vercel/next.js --skill next-cache-components-optimizer

装完只要项目里有 cacheComponents: true，Agent 会自动加载这个 Skill，全程提示你用对缓存模式。

适用场景

• 正在迁移到 Next.js App Router 并启用 PPR 的团队
• 想优化 SSR 缓存命中率、提升首屏加载速度
• 需要给团队定缓存规范的 Tech Lead
• 被 revalidateTag 和 revalidatePath 搞混的开发者

总结一下

这个 Skill 不是教你「什么是缓存」，而是直接告诉你「在这个场景下缓存怎么配」。Vercel 官方维护，跟 Next.js 源码版本同步更新，踩坑成本几乎为零。

如果你现在正在做 Next.js 性能优化，或者正准备上 Cache Components，这个 Skill 值得先装上。

GitHub：https://github.com/vercel/next.js（Skill 位于 .agents/skills/next-cache-components-optimizer 目录）

GitHub: https://github.com/vercel/next.js/tree/canary/.agents/skills/next-cache-components-optimizer