vercel-react-best-practices

To optimize React and Next.js performance, apply 45 structured rules across 8 categories including bundle size, server-side rendering, and data fetching. This enforces consistent code reviews by prioritizing patterns like dynamic imports and strategic suspense boundaries.

The best way to eliminate data fetching waterfalls in Next.js is applying prioritized optimization patterns for client-side fetching and per-request caching. These rules restructure component data loading to remove sequential blocks and improve rendering speed.

To reduce React bundle size, apply structured guidelines for bundle size optimization. These rules direct automated refactoring to use dynamic imports and minimal serialization at server boundaries, ensuring you ship faster, more reliable apps.

You need strategic suspense boundaries in Next.js when resolving server-side performance bottlenecks and client-side re-render issues. The guidelines encode advanced patterns to place boundaries effectively, improving data fetching and rendering performance.

Yes, you can use these React performance guidelines for automated refactoring tasks across components, pages, and data fetching. The rules encode YAML frontmatter metadata, safety checks, and dependency enumeration to guide structured code generation.

Excessive React re-renders and slow JavaScript performance often stem from unoptimized component structures and poor data fetching strategies. Applying structured re-render optimization rules resolves this by enforcing performance patterns during development and refactoring.