vercel-react-best-practices

Optimize React and Next.js performance by applying over 45 rules across 8 categories covering waterfall elimination, bundle size reduction, server-side efficiency, and re-render optimization to achieve faster load times and improved user experience.

Eliminate Next.js data fetching waterfalls by parallelizing data requests according to Vercel engineering best practices, which provide concrete incorrect versus correct implementation examples for refactoring existing code.

Reduce React JavaScript bundle size by following specific optimization guidelines that target advanced JavaScript patterns and module loading efficiency to minimize client-side delivery payload.

This React optimization guidance applies directly to code review tasks, offering automated code generation and review checks based on Vercel best practices for both new development and refactoring.

Next.js features suffer from inefficient re-renders when component rendering logic is not optimized; applying targeted re-render efficiency rules during development prevents these specific performance bottlenecks.

You can use these Next.js performance rules for server-side optimization, as the guidelines explicitly cover server-side performance alongside bundle size management and client-side re-render efficiency.