vercel-react-best-practices

To optimize React and Next.js rendering, apply 57 rules across 8 categories that eliminate waterfalls, reduce bundle size, and refine server-side rendering. Guide code reviews and refactoring to enforce these proven performance improvements across your application.

Eliminating data waterfalls in Next.js involves applying specific best practices for server-side and client-side data fetching. This Skill guides you through concrete patterns and refactoring scenarios to optimize data fetches and improve overall rendering performance.

To reduce bundle size and improve Next.js server actions, apply targeted best practices across 8 performance categories. This approach provides practical guidance for writing and reviewing code to enforce optimized bundle outputs and efficient server action implementations.

Yes, you can use these React performance rules to safely refactor existing client-side components. The guidelines support testable refactor guidance across React apps and Next.js pages, helping you apply concrete patterns to improve rendering speed without breaking functionality.

The limitations of applying these Vercel engineering best practices involve their strict focus on React and Next.js performance patterns. They target performance optimization, bundle size, caching, and rendering rather than general architectural changes or non-performance related logic.