vercel-react-best-practices

Optimize React and Next.js rendering performance by applying 57 rules across eight priority areas, covering server-side rendering, client-side data fetching, and bundle size reduction to eliminate bottlenecks and improve initial paint.

Reduce bundle size in Next.js by applying consolidated Vercel Engineering patterns that target JavaScript performance, enforce safe server actions, and guide automated refactoring to minimize client-side bloat.

Eliminate data fetching waterfalls in React server components by implementing parallel data fetching strategies outlined in the skill's performance guidelines, ensuring patterns scale efficiently across large projects.

Yes, you can use these React performance best practices for code reviews and CI checks, as the skill provides automated guidance to enforce safe usage, validation, and performance standards during code generation and refactoring.

Apply server-side versus client-side data fetching based on the eight priority categories provided, which distinguish between server-side performance concerns and client-side re-render optimization to ensure safe, scalable patterns.

Prevent unnecessary re-renders in large React applications by following the re-render optimization and advanced patterns detailed in the guidelines, which align with Vercel Engineering's proven performance strategies.