WHAT - Vercel react-best-practices 系列（一）
文章目录
- 前言
- Guidelines
- Critical Patterns
- 1. Eliminate Waterfalls（消灭瀑布流）
- Defer await until needed
- 核心问题
- 反例：无论是否需要，先 await
- 推荐：await 放进条件分支
- 典型业务场景
- 本质总结
- Use Promise.all for independent async operations
- 核心问题
- 反例：人为制造瀑布
- 推荐：并行执行
- 典型业务场景
- 注意
- Start promises early, await late
- 核心问题
- 反例：逻辑写在一起
- 推荐：先启动，再 await
- 在 Server Components 中非常重要
- 本质总结
- Use “better-all” for partial dependencies
- 场景
- 反例：全串行
- 推荐：拆依赖 + Promise.all
- 总结模式（建议记住）
- Use Suspense boundaries to stream content
- 核心问题
- 反例：全部等完才渲染
- 推荐：Suspense 分片流式渲染
- 真实收益
- 2. Reduce Bundle Size（减少 JS 体积）
- Avoid barrel file imports
- 反例
- 推荐：直接引入
- 在大项目中差异极大
- Use `next/dynamic` for heavy components
- 场景
- 反例：同步加载
- 推荐：动态加载
- 好处
- Defer non-critical third-party libraries
- 场景
- 反例：首屏直接加载
- 推荐：用户交互后加载
- Preload based on user intent
- 场景
- 示例：hover 预加载
- Next.js 路由预加载
- 总结
前言
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Guidelines
在这个系列，我会逐条拆解，每一条都给出：
- 核心问题是什么
- 为什么会慢（本质原因）
- 典型业务场景
- 反例代码
- 推荐写法
- 在 React / Next.js 中的实际收益
Critical Patterns
这是系列的第一部分。
1. Eliminate Waterfalls（消灭瀑布流）
Waterfall = 一个 async 等完了，才开始下一个 async
本质问题：不必要的串行等待
Defer await until needed
核心问题
很多代码在逻辑上并不一定需要执行异步操作，但你却提前await了。
反例：无论是否需要，先 await
asyncfunctiongetPageData(userId?:string){constuser=awaitfetchUser(userId)// ❌ userId 可能是 undefinedif(!userId){return{isGuest:true}}return{user}}问题：
- 即使是访客页面，也发起了请求
- 增加不必要的 RTT
推荐：await 放进条件分支
asyncfunctiongetPageData(userId?:string){if(!userId){return{isGuest:true}}constuser=awaitfetchUser(userId)return{user}}典型业务场景
- 登录态判断
- feature flag
- AB 实验
- 只有某个 tab / role 才需要的数据
本质总结
await 是阻塞点，越晚越好
Use Promise.all for independent async operations
核心问题
彼此没有依赖关系的请求，却被串行执行
反例：人为制造瀑布
constuser=awaitfetchUser()constorders=awaitfetchOrders()constnotifications=awaitfetchNotifications()总耗时 ≈user + orders + notifications
推荐：并行执行
const[user,orders,notifications]=awaitPromise.all([fetchUser(