vercel-react-best-practices

Vercel's React and Next.js performance optimization best practices enforce 45 rules across 8 categories, targeting critical areas like eliminating waterfalls, bundle size reduction, and data fetching strategies to improve application speed and efficiency.

To optimize data fetching and eliminate waterfalls in a Next.js application, apply guidelines that differentiate between server-side and client-side fetching strategies, ensuring parallel data retrieval to prevent cascading network delays.

The best way to reduce bundle size when building React components is to follow specific code generation and refactoring rules that minimize unnecessary dependencies and optimize imports for improved rendering performance.

Yes, you can use these Next.js optimization rules to guide automated refactoring and code generation, providing a structured set of 45 performance constraints to systematically review and update existing React application logic.

To stop unnecessary re-renders in your React application, apply the re-render optimization rules provided by the skill, which guide structural code changes to prevent redundant component updates and improve rendering performance.