vercel-react-best-practices

To optimize React and Next.js performance, apply a comprehensive set of rules targeting bundle size, data fetching, and rendering. This involves eliminating waterfalls and following prioritized best practices across eight critical categories to improve load times.

The best way to prevent data fetching waterfalls in Next.js is to implement optimized server-side and client-side fetching patterns. Reviewing data strategies ensures requests run concurrently, minimizing load times and preventing performance bottlenecks.

Your React application has a large bundle size due to unoptimized imports and rendering patterns. You can reduce it by applying bundle size optimization rules, refactoring code based on impact metrics, and eliminating unnecessary client-side JavaScript.

Yes, you can use these React performance best practices to refactor an existing codebase. The guide provides detailed explanations, code examples, and impact metrics designed for AI agents to maintain, generate, or refactor React and Next.js codebases.

To reduce unnecessary re-renders in React components, apply re-render optimization patterns provided in the guide. These advanced patterns prioritize rendering performance and JavaScript performance improvements based on their overall impact.

Yes, this guide covers both server-side and client-side rendering optimization for Next.js. It provides rules for optimized data fetching on both sides, preventing waterfalls and minimizing bundle size to ensure faster load times.