plate React 最佳实践规则解读用 SWR 实现客户端请求自动去重client-swr-dedup【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate本文解读 plate 仓库中vercel-react-best-practices技能库的client-swr-dedup规则为什么useStateuseEffect手写fetch会在多个组件实例间产生重复请求以及如何用 SWR 的useSWR、不可变数据封装和useSWRMutation实现请求去重、缓存与重新校验。读完本文你可以掌握该规则的完整判定标准impact 级别、所属分区、frontmatter 结构并在自己编写或评审 React 客户端数据获取代码时直接套用规则给出的正误示例。规则在技能体系中的位置client-swr-dedup规则文件位于 .agents/skills/vercel-react-best-practices/rules/client-swr-dedup.md是 plate 仓库内置的一套面向 Agent/LLM 的 React 性能规范之一。该技能见 .agents/skills/vercel-react-best-practices/SKILL.md共收录 69 条规则、8 个类别按影响优先级组织其中客户端数据获取Client-Side Data Fetching是第 4 类整体影响级别为 MEDIUM-HIGH。该规则文件本身的元数据frontmatter为字段值titleUse SWR for Automatic DeduplicationimpactMEDIUM-HIGHimpactDescriptionautomatic deduplicationtagsclient, swr, deduplication,>function UserList() { const [users, setUsers] useState([]) useEffect(() { fetch(/api/users) .then(r r.json()) .then(setUsers) }, []) }这段代码的问题在规则中被概括为 “no deduplication, each instance fetches”具体表现为三类冗余多实例重复请求useEffect挂在组件实例上页面上每挂载一个UserList例如列表页、侧栏概览、悬浮卡片各渲染一份就会各自发出一次相同的fetch(/api/users)N 个实例即 N 次请求没有任何共享。无缓存与复用即使上一次请求已经拿到数据组件重新挂载路由往返、条件渲染切换后useEffect仍会再次发请求因为useState里的值随实例销毁而丢失。无重新校验语义应用回到前台refocus、网络重连等时机手写代码没有任何机制判断“缓存是否还新鲜”要么永远不刷新要么每次无条件全量重取。这正是规则 frontmatter 中impact: MEDIUM-HIGH、impactDescription: automatic deduplication的由来它不解决瀑布流那是async-分区 CRITICAL 级规则的职责而是消除同一数据在客户端被重复拉取这一类浪费。正确做法用 useSWR 自动去重规则给出的正确写法Correct 示例import useSWR from swr function UserList() { const { data: users } useSWR(/api/users, fetcher) }规则原文一句话说明了它的能力“SWR enables request deduplication, caching, and revalidation across component instances”SWR 在组件实例之间提供请求去重、缓存与重新校验。对照上面的三个问题去重deduplicationuseSWR的第一个参数这里即/api/users是全局缓存的 key。多个组件用同一 key 订阅时同一时刻只存在一个 in-flight 请求其余实例共享该请求的 Promise结果统一写入缓存后同时通知所有订阅者。缓存caching数据以 key 为索引存在 SWR 的全局缓存中组件卸载再挂载、或页面路由往返后重新进入UserList会立即从缓存读取无需重新等待网络。重新校验revalidationSWR 在组件重新聚焦、重连等时机按内置策略对缓存数据做“stale-while-revalidate”式的再校验组件始终先展示缓存、再在后台刷新。规则示例中的fetcher是一个未展开的约定写法按 SWR 的约定它是一个接收 key 并返回解析后数据的普通函数典型形态为const fetcher (url: string) fetch(url).then((r) r.json())补充说明一点仓库层面的事实规则引用的 SWR 官方文档为 swr.vercel.app规则文件末尾的 Reference 一栏本文按规范不输出外链。从当前 plate 仓库的apps/www、packages及各package.json检索结果看主代码尚未直接引入 swr 依赖或useSWR调用这条规则是以“规范条目”的形式存在用于约束 Agent 在为本仓库或下游应用编写/评审 React 客户端取数代码时的行为。不可变数据useImmutableSWR并非所有数据都值得“自动重新校验”。对于配置、静态内容这类**一经下发即不变immutable**的数据反复 revalidate 只是浪费带宽。规则针对这一场景给出了第三种示例import { useImmutableSWR } from /lib/swr function StaticContent() { const { data } useImmutableSWR(/api/config, fetcher) }需要明确的是/lib/swr是规则所引用的目标应用内的约定路径即由应用在自己的lib/目录里维护该 helper并不是 plate 仓库中的文件。从源码结构看这条示例传达的工程意图是把“不可变取数”的选项组合封装成一次性导入的 helper让调用方只写useImmutableSWR(key, fetcher)而不用在每个组件里重复展开 SWR 选项。一个典型的封装思路示意实现非本仓库代码是// lib/swr.ts示意 export function useImmutableSWR(key, fetcher) { return useSWR(key, fetcher, { revalidateOnFocus: false, revalidateOnReconnect: false, shouldRetryOnError: false, }) }这样“配置类接口只取一次、不随聚焦/重连刷新、错误不无限重试”的策略就固化在 helper 里业务代码保持极简。写请求用 useSWRMutation 处理 mutationsuseSWR面向的是幂等读请求的去重对于写操作更新、提交等非幂等请求规则给出第四种示例import { useSWRMutation } from swr/mutation function UpdateButton() { const { trigger } useSWRMutation(/api/user, updateUser) return button onClick{() trigger()}Update/button }要点在于语义分工useSWRMutation(/api/user, updateUser)在渲染阶段只登记“key 变更函数”不会发起请求实际请求由用户在交互中显式调用trigger()触发避免“渲染即提交”这类副作用mutation 完成后可以联动对相关联的 key如/api/user的读缓存做重新校验保证界面数据与服务器一致。这形成了完整闭环读用useSWR自动去重不可变读用useImmutableSWR关闭刷新写用useSWRMutation手动触发 事后刷新。规则在 plate 中的落地方式与判定清单vercel-react-best-practices技能的触发时机见 SKILL.md 的 “When to Apply”包括编写新 React 组件、实现客户端或服务端数据获取、评审代码性能问题、重构既有 React 代码等场景。也就是说当 Agent 在 plate 仓库中做上述任务并遇到“客户端取数”代码时client-swr-dedup是第 4 类中直接命中的检查项。结合本规则与其他规则可以整理出一份实用判定清单场景推荐方案判定依据多个组件实例共享同一读请求useSWR(key, fetcher)同 key 共享单个 in-flight 请求与全局缓存数据下发后不变配置、静态内容应用内封装的useImmutableSWR关闭聚焦/重连时的重新校验与错误重试写操作、非幂等请求useSWRMutation(key, mutation)渲染不触发、trigger()手动触发、成功后可刷新读缓存组件实例各自useEffectfetch应重写规则判定的反模式无去重、无缓存、无 revalidation服务端RSC侧的同请求去重参考server-cache-react规则React.cache()服务端去重属于server-分区与客户端 SWR 去重互补最后需要说明适用边界本规则是通用 React/Next.js 客户端取数指南示例中的/api/users、updateUser等均为示意接口其 SWR 相关能力去重、缓存、revalidation依赖 SWR 库本身的实现具体版本行为以 SWR 官方文档为准。在 plate 仓库语境下它的正确用法是作为代码评审与生成的判定标准——对照 Incorrect/Correct 两组示例逐条核对而不是要求仓库现有代码全部改写为 SWR 风格。延伸阅读仓库内路径规则本体.agents/skills/vercel-react-best-practices/rules/client-swr-dedup.md技能总览与 69 条规则速查.agents/skills/vercel-react-best-practices/SKILL.md分区定义8 大类、影响级别.agents/skills/vercel-react-best-practices/rules/_sections.md规则文件结构与构建方式frontmatter、pnpm build/validate/extract-tests.agents/skills/vercel-react-best-practices/README.md新增规则模板.agents/skills/vercel-react-best-practices/rules/_template.md【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考