vercel-react-best-practices

React and Next.js performance optimization applies proven patterns across eight priority categories, including eliminating waterfalls, bundle size reduction, server-side rendering, and re-render optimization to improve TTI and LCP metrics.

Refactoring React components to reduce bundle size involves applying code-splitting rules and bundle optimization patterns documented in the skill, enabling automated tooling to identify and remove unnecessary client-side JavaScript.

Server-side rendering performance in Next.js depends on eliminating data fetching waterfalls, utilizing optimized client-side fetching patterns, and applying SSR hydration rules to minimize load times and improve core web vitals.

These React performance patterns support automated code reviews by providing practical rules with concrete examples for common scenarios like data fetching and code-splitting, enabling consistent practices across writing and refactoring workflows.

Optimizing re-renders versus bundle size depends on your performance bottleneck: apply re-render optimization rules for client-side rendering bottlenecks, and use bundle size optimization patterns when JavaScript payload impacts TTI and LCP metrics.

Poor LCP in Next.js server-side rendering often stems from data fetching waterfalls and suboptimal SSR hydration, which can be resolved by applying the skill's server-side performance and client-side data fetching patterns.