vercel-react-best-practices

Optimize React and Next.js performance by applying structured rules across eight categories, including bundle optimization, server-side performance, and eliminating data fetching waterfalls. This provides concrete, battle-tested patterns with code examples to systematically improve rendering and server/client interactions.

Bundle optimization best practices involve applying concrete rules that reduce JavaScript payload sizes and improve Web Vitals. This guide codifies specific patterns to systematically refactor components and pages, ensuring minimal bundle size for Vercel deployments.

Eliminate data fetching waterfalls by following structured best practices for server-side performance and server actions. This guide provides specific patterns to refactor data flows, ensuring parallel fetching and optimal server/client interactions in Next.js.

Yes, you can use these rules for automated code reviews. The structured guidance is designed to drive automated tooling and reviewer checks, providing safety checks and validation across multiple rule categories to guide both automated tooling and human review.

Reduce unnecessary re-rendering by applying specific rules from the re-rendering and rendering categories. This guide codifies performance patterns with code examples to systematically improve component rendering efficiency and overall Web Vitals.