vercel-react-best-practices

To reduce React bundle size and eliminate waterfalls, apply Vercel best practices by auditing components against eight priority categories, optimizing server components, and enforcing immutable data patterns to improve TTI and LCP.

Vercel's priority categories for refactoring React performance include Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.

Optimize Next.js server-side performance by applying defined rule prefixes to refactoring tasks, ensuring server actions and Suspense boundaries follow Vercel-approved patterns to reduce rendering bottlenecks and data waterfalls.

Yes, these React optimization guidelines are designed for automated code reviews and generation, providing a taxonomy of eight categories with defined prefixes to systematically guide refactoring and enforce performance best practices.

Yes, this approach works for both by providing distinct rules for Client-Side Data Fetching and Server-Side Performance, ensuring optimal rendering and data patterns across server components and client-side operations.

Apply bundle size optimization rules to reduce initial load times and re-render optimization rules to prevent unnecessary component updates, using the eight-category taxonomy to prioritize refactoring based on specific performance bottlenecks.