📦 Vercel React Best Practices — Vercel工具

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 64 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

当...时 到 Apply

Reference these guidelines when:

• Writing 新的 React components 或 下一个.js pages
• Implementing data fetching (client 或 server-side)
• Reviewing code 对于 performance issues
• Refactoring existing React/下一个.js code
• Optimizing bundle size 或 加载 乘以

Rule Categories 由 Priority

Quick Reference

1. Eliminating Waterfalls (CRITICAL)

• 异步-defer-等待 - 移动 等待 进入 branches 在哪里 actually used
• 异步-parallel - 使用 Promise.所有() 对于 independent operations
• 异步-dependencies - 使用 better-所有 对于 partial dependencies
• 异步-api-routes - 开始 promises early, 等待 late 在...中 API routes
• 异步-suspense-boundaries - 使用 Suspense 到 stream content

2. Bundle Size Optimization (CRITICAL)

• bundle-barrel-imports - 导入 directly, avoid barrel files
• bundle-dynamic-imports - 使用 下一个/dynamic 对于 heavy components
• bundle-defer-第三个-party - 加载 analytics/logging 之后 hydration
• bundle-conditional - 加载 modules 仅 当...时 feature activated
• bundle-preload - Preload 在...上 hover/focus 对于 perceived speed

3. Server-Side Performance (HIGH)

• server-auth-actions - 认证 server actions 点赞 API routes
• server-缓存-react - 使用 React.缓存() 对于 per-请求 deduplication
• server-缓存-lru - 使用 LRU 缓存 对于 cross-请求 caching
• server-dedup-props - Avoid duplicate serialization 在...中 RSC props
• server-hoist-static-io - Hoist static I/O (fonts, logos) 到 模块 level
• server-serialization - Minimize data passed 到 client components
• server-parallel-fetching - Restructure components 到 parallelize fetches
• server-之后-nonblocking - 使用 之后() 对于 non-blocking operations

4. Client-Side Data Fetching (MEDIUM-HIGH)

• client-swr-dedup - 使用 SWR 对于 automatic 请求 deduplication
• client-事件-listeners - Deduplicate global 事件 listeners
• client-passive-事件-listeners - 使用 passive listeners 对于 scroll
• client-localstorage-schema - Version 和 minimize localStorage data

5. Re-render Optimization (MEDIUM)

• rerender-defer-reads - Don't 订阅 到 state 仅 used 在...中 callbacks
• rerender-memo - Extract expensive work 进入 memoized components
• rerender-memo-带有-默认-值 - Hoist 默认 non-primitive props
• rerender-dependencies - 使用 primitive dependencies 在...中 effects
• rerender-derived-state - 订阅 到 derived booleans, 不 raw values
• rerender-derived-state-否-effect - Derive state 期间 render, 不 effects
• rerender-functional-setstate - 使用 functional setState 对于 stable callbacks
• rerender-lazy-state-init - Pass 函数 到 useState 对于 expensive values
• rerender-simple-表达式-在...中-memo - Avoid memo 对于 simple primitives
• rerender-split-combined-hooks - Split hooks 带有 independent dependencies
• rerender-移动-effect-到-事件 - Put interaction logic 在...中 事件 handlers
• rerender-transitions - 使用 startTransition 对于 non-urgent updates
• rerender-使用-deferred-值 - Defer expensive renders 到 keep 输入框 responsive
• rerender-使用-ref-transient-values - 使用 refs 对于 transient frequent values
• rerender-否-inline-components - Don't define components inside components

6. Rendering Performance (MEDIUM)

• rendering-animate-svg-wrapper - Animate div wrapper, 不 SVG 元素
• rendering-content-visibility - 使用 content-visibility 对于 long lists
• rendering-hoist-jsx - Extract static JSX outside components
• rendering-svg-precision - 归约 SVG coordinate precision
• rendering-hydration-否-flicker - 使用 inline script 对于 client-仅 data
• rendering-hydration-suppress-warning - Suppress expected mismatches
• rendering-activity - 使用 Activity 组件 对于 show/hide
• rendering-conditional-render - 使用 ternary, 不 && 对于 conditionals
• rendering-usetransition-loading - Prefer useTransition 对于 loading state
• rendering-resource-hints - 使用 React DOM resource hints 对于 preloading
• rendering-script-defer-异步 - 使用 defer 或 异步 在...上 script tags

7. JavaScript Performance (LOW-MEDIUM)

• js-batch-dom-css - 分组 CSS changes 通过 classes 或 cssText
• js-索引-maps - Build 地图 对于 repeated lookups
• js-缓存-属性-access - 缓存 对象 properties 在...中 loops
• js-缓存-函数-results - 缓存 函数 results 在...中 模块-level 地图
• js-缓存-storage - 缓存 localStorage/sessionStorage reads
• js-combine-iterations - Combine multiple 过滤/地图 进入 one 循环
• js-length-check-第一个 - Check 数组 length 之前 expensive comparison
• js-early-exit - Return early 从 functions
• js-hoist-regexp - Hoist RegExp creation outside loops
• js-min-max-循环 - 使用 循环 对于 min/max 代替 的 排序
• js-设置-地图-lookups - 使用 设置/地图 对于 O(1) lookups
• js-tosorted-immutable - 使用 toSorted() 对于 immutability
• js-flatmap-过滤 - 使用 flatMap 到 地图 和 过滤 在...中 one pass

8. Advanced Patterns (LOW)

• advanced-事件-处理器-refs - Store 事件 handlers 在...中 refs
• advanced-init-once - Initialize app once per app 加载
• advanced-使用-latest - useLatest 对于 stable 回调 refs

如何 到 使用

Read individual rule files for detailed explanations and code examples:

rules/async-parallel.md
rules/bundle-barrel-imports.md

Each rule file contains:

• Brief explanation 的 为什么 matters
• 错误 code 示例 带有 explanation
• 正确 code 示例 带有 explanation
• Additional context 和 references

满 Compiled Document

For the complete guide with all rules expanded: AGENTS.md