vercel-react-best-practices

To optimize React and Next.js performance, apply structured best-practice guidelines across 57 rules spanning data fetching, bundling, and rendering. Review components against category-slug rules to systematically identify and eliminate performance bottlenecks.

The best way to eliminate data fetching waterfalls in Next.js is applying structured server- and client-side fetching guidelines. Use the server- and client- prefixed rules to parallelize fetches and avoid cascading request delays.

Reduce React bundle size by applying the bundle- prefixed optimization rules. These actionable patterns target unnecessary dependencies and inefficient imports, guiding automated refactoring to deliver a smaller, faster client bundle.

Yes, this React optimization approach applies to both server-rendering and client-side rendering. It provides dedicated guidelines for server and client data fetching, rendering performance, and rerender optimization across your Next.js application.

Next.js components re-render unnecessarily due to improper state management or prop changes; fix them using rerender- prefixed rules. These guidelines offer actionable patterns to validate rendering performance and prevent avoidable re-executions.