vercel-react-best-practices

React and Next.js performance optimization involves following 57 rules across 8 priority categories, covering waterfalls, bundle size, server-side rendering, client data fetching, and re-render optimization.

To fix React rendering bottlenecks during code review, apply structured, example-driven patterns to identify and resolve issues in component rendering, server actions, and Suspense usage.

To reduce your Next.js bundle size, apply the bundle optimization guidelines provided within the 8 priority categories, starting with eliminating waterfalls and analyzing bundle size before moving to server patterns.

Yes, this approach works for optimizing server actions and client data fetching by enforcing specific patterns across server-side rendering and client-side data retrieval to eliminate waterfalls.

You should apply these performance guidelines during feature development, pull request reviews, and refactoring sessions to systematically identify and fix rendering, data fetching, and bundling bottlenecks.

The recommended order for addressing Next.js performance issues is to start with eliminating waterfalls and bundle size optimization, then proceed to server and client data fetching patterns as needed.