vercel-react-best-practices

React and Next.js performance best practices involve applying 57 category-prioritized rules across bundle optimization, server-side rendering, data fetching, and re-render reduction to eliminate bottlenecks during code generation and refactoring.

Fix data fetching waterfalls in Next.js by enforcing parallel data fetching patterns and utilizing Suspense boundaries, ensuring safety and correctness across client and server boundaries to reduce sequential loading bottlenecks.

Review React components for performance regressions by applying guidelines prioritized by impact, checking for bundle size optimization, client-side data fetching efficiency, and re-render optimization to catch bottlenecks during code reviews.

Yes, you can use this guide for refactoring server actions and caching in Next.js because it enforces specific guardrails for server actions, Suspense, caching, and parallel data fetching across client/server boundaries.

The best way to reduce bundle size in a Next.js project is to apply performance guidelines focused on bundle size optimization and advanced patterns, ensuring code generation and automated refactoring prioritize minimal client-side JavaScript.