vercel-react-best-practices

Optimize React and Next.js performance by applying over 50 targeted rules covering waterfall elimination, bundle size reduction, server-side rendering, and re-render optimization to ensure faster load times and smoother user interactions.

Reduce Next.js bundle size by following specific performance guidelines that target data fetching parallelization and server component optimization, minimizing the JavaScript shipped to the client for fast initial rendering.

An AI agent refactors React components for performance by consuming agent-optimized guidelines during code generation and review, systematically applying rules to eliminate waterfalls and optimize client-side data fetching.

You can use these React optimization rules for server-side rendering improvements, as the guidelines explicitly cover server-side performance and server components to deliver fast initial rendering in Next.js applications.

Next.js pages suffer from data fetching waterfalls when requests are not parallelized, a specific bottleneck this Skill addresses by providing rules to parallelize data fetching and improve server-side performance.

You need performance guidelines for React re-render optimization when interactions become sluggish, applying advanced patterns and JavaScript performance rules to prevent unnecessary re-renders and improve rendering performance.