vercel-react-best-practices

Vercel React Best Practices

技能概述

Vercel React Best Practices 是一套面向 React 和 Next.js 应用的完整性能优化指南，由 Vercel 工程团队维护，包含 45 条按优先级分类的优化规则，帮助开发者编写更快的 React 代码。

适用场景

1. 编写和审查代码

在编写新的 React 组件或 Next.js 页面时，自动应用最佳实践模式。进行代码审查时，快速识别性能隐患和反模式，确保团队代码质量统一。

2. 性能瓶颈诊断

当应用出现加载缓慢、卡顿或 bundle 过大等问题时，通过规则列表快速定位问题根源，获得针对性的解决方案和代码示例。

3. 渐进式优化重构

根据优先级（Critical/High/Medium）逐步优化现有项目，从消除瀑布请求和减小 bundle 开始，逐步深入到重渲染优化和 JavaScript 性能调优。

核心功能

1. 45 条分类优化规则

涵盖 8 大类别：消除瀑布请求、Bundle 优化、服务端性能、客户端数据获取、重渲染优化、渲染性能、JavaScript 性能和高级模式。每条规则包含错误示例、正确示例和原理解释。

2. 优先级驱动执行

规则按影响程度标记为 CRITICAL/HIGH/MEDIUM/LOW，帮助开发者优先解决最关键的性能问题。例如，async-parallel（并行请求）和 bundle-barrel-imports（直接导入）标记为 CRITICAL，应该优先处理。

3. 完整代码示例对比

每条规则提供 before/after 代码对比，清晰展示问题模式和正确写法。例如，async-defer-await 展示如何将 await 移到实际使用的分支，避免阻塞无关代码；bundle-dynamic-imports 演示使用 next/dynamic 按需加载重型组件。

常见问题

React 组件什么时候需要用 memo 包装？

当组件的渲染成本较高，且经常因父组件重渲染而无效更新时。例如，复杂计算、大型列表项或包含昂贵操作的组件。但要注意，memo 不是万能药，对于简单组件可能增加开销。

Next.js 如何避免数据请求瀑布效应？

使用 Promise.all 并行获取独立数据，避免串行 await。在服务组件中使用 React.cache 去重相同请求，使用 Suspense 边界流式渲染内容。对于 API 路由，尽早启动 Promise，在需要时再 await。

如何检测 React 组件的重渲染次数？

可以使用 React DevTools 的 Profiler 功能，或在开发环境中添加 console.log 来观察渲染频率。更系统的方法是使用 rerender-defer-reads 规则检查是否订阅了仅在回调中使用的状态，以及使用 rerender-derived-state 检查是否可以订阅派生布尔值而非原始值。

这个技能适用于哪些框架？

目前专注于 React 和 Next.js。规则中的服务端性能部分专门针对 Next.js App Router 的服务组件和 API 路由。客户端数据获取规则适用于任何 React 应用，但 SWR 推荐更适合 Vercel 生态。

优化应该从哪个优先级开始？

建议从 CRITICAL 级别开始，特别是 async-parallel（并行请求）和 bundle-barrel-imports（直接导入）。这两类问题影响最直接，优化收益最明显。完成后再根据实际性能瓶颈选择 HIGH 或 MEDIUM 级别的规则。