Vercel React 最佳实践

由 Vercel 维护的 React 与 Next.js 应用综合性能优化指南。涵盖 8 个类别共 62 条规则，并按影响程度排序，以指导自动化重构与代码生成。

适用场景

在以下情况下参考本指南：

• 编写新的 React 组件或 Next.js 页面
• 实现数据获取（客户端或服务端）
• 审查代码是否存在性能问题
• 重构现有 React/Next.js 代码
• 优化包体积或加载时间

按优先级划分的规则类别

快速查阅

1. 消除瀑布式请求（CRITICAL）

• async-defer-await — 将 await 移至实际使用它的分支中
• async-parallel — 对独立操作使用 Promise.all()
• async-dependencies — 使用 better-all 处理部分依赖关系
• async-api-routes — 在 API 路由中尽早启动 Promise，延迟 await
• async-suspense-boundaries — 使用 Suspense 流式传输内容

2. 包体积优化（CRITICAL）

• bundle-barrel-imports — 直接导入，避免使用 barrel 文件
• bundle-dynamic-imports — 对重型组件使用 next/dynamic
• bundle-defer-third-party — 在 hydration 完成后加载分析/日志工具
• bundle-conditional — 仅在功能启用时加载对应模块
• bundle-preload — 在悬停/聚焦时预加载，提升感知速度

3. 服务端性能（HIGH）

• server-auth-actions — 像处理 API 路由一样对服务端操作进行身份验证
• server-cache-react — 使用 React.cache() 实现按请求去重
• server-cache-lru — 使用 LRU 缓存实现跨请求缓存
• server-dedup-props — 避免在 RSC props 中重复序列化数据
• server-hoist-static-io — 将静态 I/O（如字体、Logo）提升至模块层级
• server-serialization — 最小化传递给客户端组件的数据量
• server-parallel-fetching — 重构组件结构以并行执行 fetch 请求
• server-after-nonblocking — 使用 after() 执行非阻塞操作

4. 客户端数据获取（MEDIUM-HIGH）

• client-swr-dedup — 使用 SWR 实现自动请求去重
• client-event-listeners — 去重全局事件监听器
• client-passive-event-listeners — 对滚动事件使用 passive 监听器
• client-localstorage-schema — 对 localStorage 数据进行版本控制并最小化其体积

5. 重渲染优化（MEDIUM）

• rerender-defer-reads — 不要订阅仅在回调中使用的状态
• rerender-memo — 将耗时逻辑提取为 memoized 组件
• rerender-memo-with-default-value — 将默认的非原始类型 props 提升至外层作用域
• rerender-dependencies — 在 effect 中使用原始类型作为依赖项
• rerender-derived-state — 订阅派生布尔值，而非原始值
• rerender-derived-state-no-effect — 在渲染过程中派生状态，而非在 effect 中
• rerender-functional-setstate — 使用函数式 setState 保证回调稳定性
• rerender-lazy-state-init — 向 useState 传入函数以延迟计算昂贵初始值
• rerender-simple-expression-in-memo — 避免对简单原始值使用 memo
• rerender-move-effect-to-event — 将交互逻辑移至事件处理器中
• rerender-transitions — 对非紧急更新使用 startTransition
• rerender-use-ref-transient-values — 对频繁变化的临时值使用 ref
• rerender-no-inline-components — 不要在组件内部定义组件

6. 渲染性能（MEDIUM）

• rendering-animate-svg-wrapper — 动画作用于 div 包裹器，而非 SVG 元素本身
• rendering-content-visibility — 对长列表使用 content-visibility
• rendering-hoist-jsx — 将静态 JSX 提取到组件外部
• rendering-svg-precision — 降低 SVG 坐标精度
• rendering-hydration-no-flicker — 使用内联脚本提供仅客户端数据，防止闪烁
• rendering-hydration-suppress-warning — 抑制预期的 hydration 差异警告
• rendering-activity — 使用 Activity 组件控制显示/隐藏
• rendering-conditional-render — 使用三元表达式而非 && 进行条件渲染
• rendering-usetransition-loading — 优先使用 useTransition 管理加载状态
• rendering-resource-hints — 使用 React DOM 的资源提示（resource hints）进行预加载
• rendering-script-defer-async — 在