vercel-react-best-practices

To optimize React and Next.js performance, apply a structured catalog of 70 optimization rules across components, pages, and data-fetching to prevent waterfalls and reduce bundle size. This guides automated refactoring workflows to systematically fix rendering and bundling bottlenecks.

Preventing data fetching waterfalls in Next.js involves applying targeted optimization rules to pages and server actions. By enforcing structured performance patterns during code generation, you streamline data retrieval sequences and eliminate sequential blocking fetches across the application.

Reduce React bundle size by applying categorized optimization rules focused on bundling scenarios and component structures. Using a rule-based validation system during code review and generation identifies inefficient imports and rendering patterns that inflate the final build output.

Yes, the Next.js performance optimization approach explicitly works with server actions, alongside API routes and pages. It provides practical guidance and structured rules to ensure server actions and data-fetching workflows avoid performance regressions and rendering bottlenecks.

Use a structured rule system for React performance when writing, reviewing, or refactoring code to consistently apply high-impact patterns. It is necessary when a project struggles with performance regressions from unoptimized rendering, data fetching, and bundling across the codebase.