React.cache() 请求内去重指南：服务端认证与数据库查询的 RSC 性能优化（mediago Vercel React 最佳实践）

音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载本篇技术指南围绕 mediago 仓库中.agents/skills/vercel-react-best-practices/技能集里的server-cache-react.md规则展开深入讲解 React Server ComponentsRSC场景下如何使用React.cache()实现单请求内去重避免同一请求中对认证会话、数据库查询等异步操作的多余重复执行。读完本文你将掌握React.cache()的命中原理浅比较 /Object.is、正确的参数形态写法、与 Next.jsfetch自动记忆化的分工边界以及它与跨请求 LRU 缓存、客户端 SWR 去重等配套规则的适用场景取舍。规则来源与定位该规则文件位于仓库的 server-cache-react.md属于.agents/skills/vercel-react-best-practices/这一面向 Agent 与 LLM 的结构化 React 最佳实践技能集。根据该技能集的 README.md所有规则按影响等级Impact与所属领域area prefix组织其中server-前缀对应第 3 节Server-Side Performance服务端性能见 _sections.md本规则的 Impact 为MEDIUMimpactDescription 明确为 deduplicates within request请求内去重标签为server, cache, react-cache, deduplication。这意味着它解决的是服务端渲染管线中的一类高频问题同一请求内组件树中不同位置多次调用同一个异步数据函数导致底层查询 / 认证被重复执行。什么是 React.cache() 与请求内去重在 React Server Components 中React.cache()用于包装异步函数使其在同一个请求request的生命周期内具备记忆化memoization能力包装后的函数被多次调用时只要参数匹配命中缓存函数体如数据库查询就只真正执行一次后续调用直接返回首次执行的结果。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被cache()包装后同一请求内对它的多次调用只触发一次auth()与一次db.user.findUnique()。这正是认证检查和数据库查询从中受益最大的原因它们往往是组件树中被多个组件共享、且每次执行成本都较高的操作。从源码层面看该规则属于服务端性能类别见 _sections.md 中 Section 3 的定位Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times其核心价值在于在不改变调用方代码的前提下用一行cache()包装抹平组件树内部的重复异步工作。命中原理浅比较与 Object.is要正确使用React.cache()必须先理解它的缓存键cache key判定规则React.cache()使用浅比较shallow equality即Object.is来确定是否命中缓存。这一机制直接决定了参数形态的写法要求传原始值primitive如数字、字符串按值相等比较getUser(1)与getUser(1)命中同一缓存项传内联对象每次调用都创建一个新的对象引用Object.is比较必然失败永远无法命中缓存。错误写法内联对象参数导致永远 Cache Missconst getUser cache(async (params: { uid: number }) { return await db.user.findUnique({ where: { id: params.uid } }); }); // Each call creates new object, never hits cache getUser({ uid: 1 }); getUser({ uid: 1 }); // Cache miss, runs query again这里两次getUser({ uid: 1 })虽然看起来参数值相同但每次调用都构造了全新的对象字面量引用不同Object.is判定不相等因此第二次调用依然会重新执行查询——去重完全失效。正确写法原始值参数按值命中const getUser cache(async (uid: number) { return await db.user.findUnique({ where: { id: uid } }); }); // Primitive args use value equality getUser(1); getUser(1); // Cache hit, returns cached result把对象解构为原始值参数后getUser(1)两次调用按值相等命中缓存第二次调用直接返回首次查询结果不再访问数据库。必须传对象的场景复用同一引用如果业务上确实需要传入对象那么必须保证多次调用传递同一个对象引用const params { uid: 1 }; getUser(params); // Query runs getUser(params); // Cache hit (same reference)注意这里的语义差异第一次调用真正执行查询第二次由于引用相同而命中缓存。开发时要格外留意那些在调用处内联构造参数的写法例如getUser({ uid: item.id })它们会悄悄破坏去重效果。与 Next.js fetch 记忆化的分工需要特别说明的是 Next.js 的默认行为在 Next.js 中fetchAPI 被自动扩展了请求记忆化request memoization能力——相同 URL 与相同 options 的fetch调用在单个请求内会被自动去重因此对fetch调用本身不需要再包一层React.cache()。然而服务端异步工作远不止fetch。React.cache()依然不可或缺地用于去重以下非 fetch 的异步操作数据库查询Prisma、Drizzle 等 ORM/驱动重计算heavy computations认证检查authentication checks文件系统操作file system operations任何非 fetch 的异步工作。换句话说去重原则可以概括为fetch 交给框架的自动记忆化其余所有异步工作统一交给React.cache()去重覆盖整个组件树。请求内去重 vs 跨请求缓存的边界React.cache()的生效范围严格限定在单次请求内请求结束缓存即失效。对于需要跨请求复用数据例如用户先后点击按钮 A、按钮 B两个请求都需要同一份数据的场景应使用 LRU 缓存规则见 server-cache-lru.mdimport { LRUCache } from lru-cache; const cache new LRUCachestring, any({ max: 1000, ttl: 5 * 60 * 1000, // 5 minutes }); 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两个规则的适用边界可以这样区分维度React.cache()LRU 缓存生效范围单次请求内跨请求、跨端点典型场景认证会话、同请求内重复 DB 查询顺序用户操作命中多个端点、数秒内复用同一数据失效方式请求结束自动失效按 TTL / max 容量淘汰此外服务端性能这一节还包含若干互补而非替代的规则静态资源与配置文件应提升到模块级加载以避免每次请求重复 I/Oserver-hoist-static-io.md通过组件组合消除服务端瀑布流server-parallel-fetching.md避免在 RSC Props 中重复序列化派生数据server-dedup-props.md。而客户端侧的数据请求去重则交给 SWR 的自动去重能力client-swr-dedup.md服务端与客户端各司其职。实战检查清单综合本规则与配套规则落地React.cache()去重时建议按以下清单自查识别去重对象优先对认证会话查询、数据库查询、重计算、文件系统读取等非 fetch 异步操作应用cache()纯fetch调用交给 Next.js 自动记忆化。参数形态优先使用原始值参数uid: number避免在调用处内联构造对象必须传对象时跨多次调用复用同一个对象引用。确认命中检查调用点是否确实存在重复调用——只有同一请求内多次调用才有去重收益。界定缓存范围数据只在单请求内复用用React.cache()需要跨请求复用则升级为 LRU带max与ttl上限防止内存无限增长。留意静态 IO字体、Logo、配置文件等静态资源直接提升到模块级从根源上消除每次请求的重复读取。小结React.cache()是 React Server Components 服务端性能优化中成本最低、收益最直接的武器之一它把认证 数据库查询这类高成本异步操作在单请求内压缩为一次执行而其全部使用要点都可以归结为两句话——用cache()包装异步数据函数用原始值或复用引用作为参数。本仓库的技能集中还提供了 LRU 跨请求缓存、模块级静态 IO、并行数据获取等配套规则可作为完整服务端性能优化方案的继续阅读入口均可在.agents/skills/vercel-react-best-practices/rules/目录下找到。赞分享音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载相关推荐Langfuse 服务端请求级去重实战用 React.cache() 优化认证与数据库查询Langfuse 服务端请求级去重实战用 React.cache 优化认证与数据库查询 Langfuse 的 Web 前端 web/ 基于 React 1人工智能LLMOps可观测性AI 评测LLM 网关后端前端Sanity 仓库的 Vercel React 最佳实践用 React.cache() 实现服务端单请求去重Sanity 仓库的 Vercel React 最佳实践用 React.cache 实现服务端单请求去重 本文以 Sanity 开源仓库中 vercel reCMS前端Cherry Studio 中 React.cache() 服务端请求内去重最佳实践指南Cherry Studio 中 React.cache 服务端请求内去重最佳实践指南 导读 本指南基于 CherryHQ/cherry studio https人工智能大模型AI 应用交互助手本地部署上一篇深入理解PyTorch Elastic的Rendezvous机制实现节点动态加入与退出下一篇TrumpScript代码优化技巧让你的程序更伟大创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考