What This Skill Does
React and Next.js performance optimization guidelines from Vercel's engineering team. Covers rendering strategies, data fetching patterns, bundle optimization, and Core Web Vitals improvement.
When to Use It
- Optimizing React or Next.js application performance
- Choosing between rendering strategies (SSR, SSG, ISR, client)
- Improving Core Web Vitals scores
- Reducing bundle size
- Implementing efficient data fetching patterns
Key Topics
Rendering Strategies
- Server Components for zero-JS server rendering
- Streaming SSR for faster time-to-first-byte
- Static generation for cacheable content
- Client components only for interactivity
Bundle Optimization
- Dynamic imports for code splitting
- Tree shaking effectiveness
- Font and image optimization
- Third-party script management
Data Fetching
- Server-side data fetching with caching
- Parallel data loading patterns
- Optimistic updates for perceived performance