vercel-react-best-practices

To optimize React and Next.js performance, apply curated best-practice patterns across eight priority categories including bundle size reduction, server-side rendering, and eliminating data fetching waterfalls. It guides automated refactoring and code generation for faster load times.

Best practices for reducing bundle size involve applying specific optimization patterns from the bundle size category. This includes analyzing component imports, evaluating trade-offs, and refactoring code to minimize client-side JavaScript payloads for improved loading times.

Eliminating waterfalls improves data fetching by restructuring sequential server-side requests into parallel patterns. This enhances server-side performance and reduces loading times by preventing blocking operations during client-side and server-side rendering processes.

Yes, you can use these React performance patterns for refactoring existing components. The guidelines support code reviews and refactors across components, pages, and data fetching, providing concrete examples and trade-offs to accelerate compliant updates.

Limitations include needing manual evaluation of trade-offs for specific scenarios. While the patterns cover re-render optimization and advanced JavaScript performance across eight categories, teams must contextualize concrete examples to ensure they suit their specific platform scale.