vercel-react-best-practices

Optimize React and Next.js performance by applying 58 prioritized rules across eight categories, including eliminating waterfalls, bundle size optimization, and server-side performance. This enforces patterns for rendering speed, data fetching, and server/client handling.

Prevent data fetching waterfalls in Next.js by applying server-side performance patterns and server actions to parallelize data retrieval. This ensures efficient client-side data fetching and minimizes rendering bottlenecks across components and API routes.

Reduce bundle size in Next.js by optimizing bundle imports and applying guardrails to automate refactoring. This minimizes initial load time and ensures leaner applications by enforcing strict server/client data handling boundaries.

Use React Server Components (RSC) to improve SSR and SSG boundaries by shifting data fetching to the server. This reduces client-side JavaScript and leverages server actions to maintain scalable performance and secure data handling.

Optimize re-renders in React components when client-side data fetching and state changes cause unnecessary rendering bottlenecks. Apply specific rendering performance patterns and guardrails to preserve correctness while improving speed.

Automated code refactoring for React performance is constrained by guardrails designed to preserve correctness and security. It targets specific areas like server actions and API routes, but requires careful application of the rule set to avoid breaking server/client boundaries.