vercel-react-best-practices

Topics in the source

• Vercel React Best Practices
• When to Apply
• Rule Categories by Priority
• Quick Reference
• 1. Eliminating Waterfalls (CRITICAL)
• 2. Bundle Size Optimization (CRITICAL)
• 3. Server-Side Performance (HIGH)
• 4. Client-Side Data Fetching (MEDIUM-HIGH)

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. Reference these guidelines when: Writing new React components or Next.js pages Implementing data fetching (client or server-side) Reviewing code for performance issues Refactoring existing React/Next.js code Optimizing bundle size or load times | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | async- | | 2 | Bundle Size Optimization | CRITICAL | bundle- | | 3 | Server-Side Performance | HIGH | server- | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- | | 5 | Re-render Optimization | MEDIUM | rerender- | | 6 | Rendering Performance | MEDIUM | rendering- | | 7 | JavaScript Performance | LOW-MEDIUM | js- | | 8 | Advanced Patterns | LOW | advanced- | async-cheap-condition-before-await - Check cheap sync conditions before awaiting flags or remote values async-defer-await - Move await into branches where actually used async-parallel - Use Promise.all() for independent operations async-dependen

This is an excerpt. Refer to the complete source and its current requirements.