vercel-react-best-practices

To optimize React components and Next.js pages for performance, apply structured rules that reduce rendering overhead, improve data fetching patterns, and minimize bundle size. Use these guidelines during code reviews and refactoring to ensure verifiable speed gains.

Reducing data fetching waterfalls in Next.js involves applying targeted performance rules to data fetching patterns. Identify sequential fetching bottlenecks and apply actionable guidance to parallelize requests, improving SSR efficiency and overall user experience.

Review React code for bundle optimization and SSR efficiency by applying a categorized collection of performance rules. Check components against these rules to identify bottlenecks, ensure safe refactoring, and preserve correctness while improving bundle performance.

Yes, this performance guidance works for both SSR and CSR rendering patterns by enforcing rules that specifically target SSR and CSR efficiency. It provides actionable guidance tailored for React components and Next.js pages to optimize rendering overhead across different rendering strategies.

Yes, you can use these rules to guide automated refactoring of React components. They enforce requirements for understanding and guiding refactorings, ensuring safe, verifiable performance improvements while preserving correctness during the refactoring process.

When improving Next.js bundle size and performance, avoid unsafe refactoring that breaks correctness. These guidelines enforce requirements for understanding refactoring impacts, ensuring you identify bottlenecks safely without compromising reliability, user experience, or existing functionality.