vercel-react-best-practices

To optimize React and Next.js performance, apply 57 rules across 8 categories covering waterfalls, bundle size, server-side rendering, client-side data fetching, and re-render optimization to ensure faster load times.

The best way to reduce JavaScript bundle size is by applying targeted optimization strategies that minimize code shipping. This Skill provides specific bundle size reduction guidelines to help make your Next.js application faster and more responsive.

Server-side rendering can cause data fetching waterfalls if requests are not parallelized. This Skill guides optimizing data fetching and rendering on the server to prevent sequential request bottlenecks and improve server-side efficiency.

Yes, you can use these React performance rules when refactoring existing components. The guidelines are applicable to code reviews and refactoring to ensure your components are optimized for re-renders and adhere to Vercel's best practices.

Slow rendering performance often stems from unoptimized re-renders, large bundle sizes, or inefficient client-side data fetching. This Skill helps identify and resolve these bottlenecks using comprehensive JavaScript and component rendering optimization techniques.