vercel-react-best-practices

To optimize React and Next.js performance, apply 57 best practice rules across 8 categories covering render times, bundle size, and data fetching. Audit components for waterfalls and server/client boundaries, then use automated refactoring patterns to implement safe, scalable optimizations.

Eliminating data fetching waterfalls in Next.js server components requires applying specific rules from the Server-Side Performance and Client-Side Data Fetching categories. The guidelines provide actionable refactoring patterns to parallelize fetches and optimize data loading across server/client boundaries.

Reducing Next.js bundle size with React server components involves applying the Bundle Size rules within the 57-rule framework. These rules guide refactoring patterns that minimize client-side JavaScript and optimize code splitting across server/client boundaries.

Yes, you can use these React performance rules to refactor existing Next.js pages and components. The skill provides automated refactoring patterns across 8 categories suitable for building, reviewing, or refactoring code to maximize production performance safely.

The best way to audit a Next.js component for rendering performance issues is applying the Re-render Optimization and Rendering Performance rules. These categories provide concrete explanations and actionable patterns to identify unnecessary re-renders and optimize component rendering efficiently.

React Suspense usage limitations fall under the Advanced Patterns and Client-Side Data Fetching categories of the 57 rules. The guidelines explain when Suspense is appropriate and when alternative data fetching patterns offer better server-side performance and rendering outcomes.