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.
Trigger: React or Next.js development, component writing, data fetching patterns, bundle optimization
Skip: Project does not use React or Next.js
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
