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.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
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
Rule Categories by Priority
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-
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
async-defer-await - Move await into branches where actually used
async-parallel - Use Promise.all() for independent operations
async-dependencies - Use better-all for partial dependencies
async-api-routes - Start promises early, await late in API routes
async-suspense-boundaries - Use Suspense to stream content
