Next.js 这个缓存 Skill，让 AI 帮你写对缓存代码

说实话，之前每次看到 Next.js 项目里 cacheComponents: true 那个配置，我是真的不知道怎么用它——官方文档就扔了一句”用 cacheLife() 控制缓存生命周期”，然后呢？没了。

直到我装了这个 cache-components Skill。

这玩意儿是 Vercel 官方出的，直接集成在 Next.js 的 .claude-plugin 里，专门教 AI 怎么写缓存组件代码。装上之后，你跟 Claude 说”帮我把这个 RSC 加上缓存”，它不再瞎写，而是会问你”用 cacheLife() 设置多久过期？用 cacheTag() 打标签方便失效吗？”

它做了什么

核心就三个指令：

• use cache — 把一个 RSC 标记为可缓存的，告别每次请求都重新渲染
• cacheLife() — 精细控制缓存存活时间，cacheLife({ stale: 60 * 60 }) 这种写法
• cacheTag() + revalidateTag() — 给缓存打标签，想让哪些内容一起失效就一起 tag，想单独失效就单独 tag

听起来简单，但坑巨多：比如你在服务端组件里用了 use cache，但里面有个 cookies() 调用——框架会直接报错，之前写的代码全白费。这个 Skill 会提前告诉你哪里会冲突，避免你一边写一边猜。

什么场景用

适用场景很明确：有大量服务端渲染页面、需要缓存加速、或者想减少数据库查询的项目。

典型用法：
– 博客/文档站，内容基本不变但每次访问都重新渲染 → 用 use cache 直接缓存整页
– 带用户个性化数据的页面 → 拆分成”公共部分缓存 + 个性化部分动态”
– 数据看板类页面 → 用 cacheTag('dashboard') 配合 revalidateTag() 实现精准失效

实测感受

我拿一个博客站试了一下，在首页加了两行代码：

// 原来：每次访问都查数据库
const posts = await db.query('SELECT * FROM posts LIMIT 10');

// 加上 use cache 之后
'use cache';
const posts = await db.query('SELECT * FROM posts LIMIT 10');

访问速度从 ~200ms 降到 ~20ms，缓存命中后直接返回预渲染结果。

配合 cacheLife({ stale: 60 * 60 * 24 }) 设置 24 小时新鲜期，静态内容完全不用动数据库了。

怎么安装

在 Claude Code / Cursor / VS Code 等支持 Claude Plugin 的编辑器里，搜 vercel/cache-components 一键安装。GitHub 仓库在 Vercel 官方 Next.js 源码里，地址：

https://github.com/vercel/next.js/tree/canary/.claude-plugin/plugins/cache-components/skills/cache-components

如果你是 Next.js 开发者，正在做性能优化或者想减轻数据库压力，这个 Skill 值得装上。它解决的问题很具体——怎么正确地给 RSC 加缓存、怎么控制失效粒度、哪些写法会踩坑——这些是文档里没有、只能靠试错积累的经验，现在 AI 直接告诉你。

GitHub：https://github.com/vercel/next.js/tree/canary/.claude-plugin/plugins/cache-components/skills/cache-components

GitHub: https://github.com/vercel/next.js/tree/canary/.claude-plugin/plugins/cache-components/skills/cache-components