AutoGPT 前端性能实践：Next.js 跨请求 LRU 缓存（server-cache-lru 规则详解）

AutoGPT 前端性能实践Next.js 跨请求 LRU 缓存server-cache-lru 规则详解【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT本文围绕 AutoGPT 仓库内置的 Vercel React 最佳实践规则server-cache-lru展开讲解当React.cache()的缓存范围只限于单个请求时如何用lru-cache实现跨请求的数据缓存。读完本文你可以掌握 LRU 缓存在 Next.js 服务端Route Handler / Server Component中的完整落地方式、max与ttl参数的含义以及在不同运行时环境共享函数实例 vs 传统 Serverless下的选型依据。规则定位Vercel React 最佳实践中的 server-cache-lru该规则文件位于 .claude/skills/vercel-react-best-practices/rules/server-cache-lru.md是 Vercel 工程团队维护的 45 条 React/Next.js 性能优化规则之一元数据标注如下title: Cross-Request LRU Cachingimpact: HIGH高影响impactDescription: caches across requests跨请求缓存tags: server, cache, lru, cross-request在 SKILL.md 的规则优先级体系中它归属于第 3 优先级分类「Server-Side Performance服务端性能HIGH」与以下 4 条服务端规则并列规则一句话说明server-cache-react用React.cache()做单请求内去重server-cache-lru用 LRU 缓存做跨请求缓存server-serialization最小化 RSC 边界序列化的数据量server-parallel-fetching重组组件结构以并行化数据获取server-after-nonblocking用after()执行不阻塞响应的操作其中server-cache-react与server-cache-lru是一对互补规则前者解决「一个请求内重复查询」后者解决「多个请求间重复查询」。两者配合构成 Next.js 服务端数据获取的完整缓存策略。核心问题React.cache() 的生命周期只有单个请求规则原文点明了问题的本质React.cache()only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.React.cache()的去重范围被绑定在单次请求的生命周期内。参考同目录的 server-cache-react.md它的典型用法是import { cache } from react export const getCurrentUser cache(async () { const session await auth() if (!session?.user?.id) return null return await db.user.findUnique({ where: { id: session.user.id } }) })在同一次渲染中多个组件调用getCurrentUser()只会执行一次查询这是它擅长的场景。但考虑用户交互的真实节奏用户先点击按钮 A触发请求 1紧接着点击按钮 B触发请求 2。这两个是顺序执行的独立请求React.cache()在请求 1 结束后即被丢弃请求 2 到达时数据必须重新查库。而这两次点击往往在秒级间隔内命中不同端点、却需要同一份数据——这正是 LRU 缓存要填补的空白。两种缓存的分工可以概括为维度React.cache()LRU Cachelru-cache作用域单个请求内跨请求进程/函数实例内容量控制无随请求销毁max条数上限自动淘汰时效控制请求结束即失效ttl过期时间适用场景同一次渲染内的多次调用去重用户在短时间内连续操作命中同一份数据LRU 缓存的完整实现规则文档给出的参考实现如下完整继承自 server-cache-lru.mdimport { LRUCache } from lru-cache const cache new LRUCachestring, any({ max: 1000, // 最多缓存 1000 个条目超出后按 LRU 策略淘汰最久未访问项 ttl: 5 * 60 * 1000 // 每条缓存存活 5 分钟毫秒到期自动失效 }) export async function getUser(id: string) { const cached cache.get(id) if (cached) return cached const user await db.user.findUnique({ where: { id } }) cache.set(id, user) return user } // Request 1: DB query, result cached // Request 2: cache hit, no DB query几个关键参数与实现细节值得展开max: 1000缓存容量上限。LRULeast Recently Used最近最少使用策略保证超限时淘汰的是最久未被访问的条目高频数据得以保留。条目数应结合单条数据的内存大小与实例内存上限权衡——本示例按 1000 条用户记录估算。ttl: 5 * 60 * 1000lru-cache的 TTL 以毫秒为单位。5 分钟的时效与规则建议的使用场景“within seconds”匹配既覆盖用户连续操作的窗口又限制脏数据暴露时间。注意 TTL 到期后条目在下次get时判定失效不会主动回调清除。泛型LRUCachestring, any键为用户 ID 字符串值为用户对象。生产环境建议将值类型收紧为具体实体类型避免any掩盖序列化/字段变更问题。模块级单例const cache new LRUCache(...)必须声明在模块顶层使同一函数实例内的所有请求共享同一个缓存对象若放进函数体内每次调用都会新建空缓存规则即失效。读写模式先get命中即返回未命中再查库并set回填。这一「旁路缓存Cache-Aside」模式与数据库查询逻辑解耦可平滑降级为直连数据库。适用场景判定规则给出的使用判据是一句话当用户的顺序操作在数秒内命中多个端点、而这些端点需要同一份数据时使用 LRU 缓存。典型的如请求 1页面加载查询用户资料结果写入缓存用户在数秒内触发请求 2按钮点击 / 下拉刷新 / 局部 RSC 更新同一getUser(id)直接从缓存返回省去数据库往返。反过来若两次请求间隔远超 TTL、或数据本身要求强一致如余额扣减后立即展示则不应依赖该缓存层或应将 TTL 收紧到业务可接受的窗口。运行时环境影响共享实例 vs 传统 Serverless规则文档特别区分了两种部署形态下 LRU 缓存的有效性这是选型时必须确认的前提共享函数实例环境如 Vercel 的 Fluid ComputeLRU 缓存在此尤为有效多个并发请求可以复用同一个函数实例模块顶层的cache对象因此在请求间持续存活——无需 Redis 等外部存储即可获得跨请求缓存。缓存的命中率直接取决于实例的复用密度。传统 Serverless 环境每次调用invocation在相互隔离的环境中运行模块级缓存在冷启动后随实例销毁跨进程无法共享。此时文档建议考虑引入 Redis 等外部存储做跨进程缓存否则进程内 LRU 只能在单实例的复用窗口内起作用效果大打折扣。从源码结构看判断标准很清晰只要你的运行时会把多个请求调度到同一进程/实例长驻容器、Fluid Compute、本地开发服务器进程内 LRU 就能稳定命中若每次请求都是独立冷实例则必须把缓存外置。仓库佐证AutoGPT 前端与 lru-cache 生态AutoGPT 平台的前端 autogpt_platform/frontend/package.json 使用 Next.js 15.5.21属于 RSCReact Server Components架构正是server-cache-react与server-cache-lru这类服务端规则的目标环境。前端锁文件 autogpt_platform/frontend/pnpm-lock.yaml 中可见lru-cache10.4.3 / 11.2.4 / 5.1.1 等多个版本作为 pnpm 生态的传递依赖被广泛引用印证了lru-cache是 Node.js 生态中事实标准的进程内缓存实现与规则推荐一致。本仓库当前并未在前端业务代码中直接实例化LRUCache该规则文件连同同目录 44 条规则的定位是指导后续开发与重构当你在 AutoGPT 前端新增需要跨请求共享数据的服务端函数如按 ID 取用户、图、凭据的查询封装时可直接套用本文模式。小结React.cache()负责请求内去重MEDIUM 影响lru-cache负责跨请求缓存HIGH 影响两者按作用域分工可叠加使用落地三要素模块顶层创建LRUCache实例、max控制容量、ttl控制时效毫秒适用判据用户顺序操作在数秒内重复命中同一数据环境前提共享函数实例下进程内缓存即可传统 Serverless 下需评估是否外置 Redis。【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考