React Best Practices 智能体

# React 最佳实践 **版本 0.1.0** Vercel Engineering 2026 年 1 月 > **注意：** > 本文档主要供智能体和 LLM 在 Vercel 维护、生成或重构 React 和 Next.js 代码库时遵循。人类开发者也可能觉得有用，但此处的指导针对 AI 辅助工作流的自动化和一致性进行了优化。 --- ## 摘要 针对 React 和 Next.js 应用的综合性能优化指南，专为 AI 智能体和 LLM 设计。包含 8 个类别中的 40 多条规则，按影响程度从关键（消除瀑布流、减小包体积）到增量（高级模式）进行优先级排序。每条规则都包含详细解释、对比错误与正确实现的真实示例，以及指导自动化重构和代码生成的具体影响指标。 --- ## 目录 1. [消除瀑布流](#1-eliminating-waterfalls) — **关键** - 1.1 [按需延迟 await](#11-defer-await-until-needed) - 1.2 [基于依赖的并行化](#12-dependency-based-parallelization) - 1.3 [防止 API 路由中的瀑布流链](#13-prevent-waterfall-chains-in-api-routes) - 1.4 [针对独立操作使用 Promise.all()](#14-promiseall-for-independent-operations) - 1.5 [策略性 Suspense 边界](#15-strategic-suspense-boundaries) 2. [包体积优化](#2-bundle-size-optimization) — **关键** - 2.1 [避免 Barrel 文件导入](#21-avoid-barrel-file-imports) - 2.2 [条件模块加载](#22-conditional-module-loading) - 2.3 [延迟非关键第三方库](#23-defer-non-critical-third-party-libraries) - 2.4 [重型组件的动态导入](#24-dynamic-imports-for-heavy-components) - 2.5 [基于用户意图的预加载](#25-preload-based-on-user-intent) 3. [服务端性能](#3-server-side-performance) — **高** - 3.1 [跨请求 LRU 缓存](#31-cross-request-lru-caching) - 3.2 [最小化 RSC 边界的序列化](#32-minimize-serialization-at-rsc-boundaries) - 3.3 [通过组件组合进行并行数据获取](#33-parallel-data-fetching-with-component-composition) - 3.4 [使用 React.cache() 进行每请求去重](#34-per-request-deduplication-with-reactcache) - 3.5 [使用 after() 进行非阻塞操作](#35-use-after-for-non-blocking-operations) 4. [客户端数据获取](#4-client-side-data-fetching) — **中高** - 4.1 [全局事件监听器去重](#41-deduplicate-global-event-listen