vercel-react-best-practices

Optimize React and Next.js performance by applying a structured playbook of 57 rules across 8 impact-prioritized categories to guide automated refactoring, eliminating waterfalls, large bundle sizes, and server/client inefficiencies.

Large bundle sizes and data fetching waterfalls in Next.js are caused by common inefficient server/client patterns, which can be resolved using structured guidelines targeting client-side data fetching strategies and bundle optimization.

Yes, this React performance guide applies to writing new components, reviewing code, and refactoring existing projects to improve TTI, LCP, and bundle size using Vercel Engineering guidelines.

The best way to eliminate server-side performance inefficiencies in Next.js is to apply impact-prioritized optimization rules that specifically address server/client boundaries and rendering strategies.

Improve LCP and TTI metrics in a React frontend by applying structured performance optimization guidelines that address bundle optimization, eliminate data waterfalls, and refine client-side data fetching strategies.

You should avoid client-side data fetching in React applications when it causes data waterfalls or server/client inefficiencies, applying the guidelines to identify when server-side performance patterns are more optimal.