Vercel React 最佳实践

解决的问题

React 与 Next.js 应用的性能问题通常不是单个算法慢，而是请求串行、第三方脚本过早加载、服务端数据重复计算、客户端状态订阅过宽、组件不必要重渲染等系统性问题。代码生成工具如果缺少这些约束，容易产出可运行但难以上线的代码。

技能如何工作

该技能把 Vercel 的指南整理为 8 个优先级类别、45 条规则，每条规则都有名称、影响范围和可执行做法：

• 关键路径：优先处理 async- 与 bundle-，例如用 Promise.all() 并行请求、用 next/dynamic 拆分重型组件、避免 barrel imports。
• 服务端与客户端：通过 React.cache()、SWR、最小化序列化数据、事件监听去重，减少重复计算和重复请求。
• 渲染与 JS 细节：用 startTransition、函数式 setState、Set/Map 查找、循环合并等降低重渲染和热路径成本。

使用方式通常是先判断问题属于哪一类，再按 async-、bundle-、server-、client-、rerender- 等前缀选择规则，并在代码评审或生成时对照错误/正确示例。

适用边界

它主要服务 React/Next.js Web 性能优化，不替代测试、可访问性、业务建模或运维监控。部分规则依赖 Next.js API，如 after() 与 next/dynamic，在纯 React 或 SSR 方案中需要按运行时能力做等价替换。