vercel-react-best-practices

1# Vercel React Best Practices
2 
3### When to Load
4 
5- **Trigger**: React or Next.js development, component writing, data fetching patterns, bundle optimization
6- **Skip**: Project does not use React or Next.js
7 
8Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 47 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
9 
10## When to Apply
11 
12Reference these guidelines when:
13 
14- Writing new React components or Next.js pages
15- Implementing data fetching (client or server-side)
16- Reviewing code for performance issues
17- Refactoring existing React/Next.js code
18- Optimizing bundle size or load times
19 
20## Rule Categories by Priority
21 
22| Priority | Category                  | Impact      | Prefix       |
23| -------- | ------------------------- | ----------- | ------------ |
24| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
25| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
26| 3        | Server-Side Performance   | HIGH        | `server-`    |
27| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
28| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
29| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
30| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
31| 8        | Advanced Patterns         | LOW         | `advanced-`  |
32 
33## Quick Reference
34 
35### 1. Eliminating Waterfalls (CRITICAL)
36…