vercel-react-best-practices

React and Next.js performance best practices involve eliminating data-fetching waterfalls, minimizing bundle size, and optimizing server-side rendering. This resource consolidates 57 vetted rules across 8 categories to guide writing, reviewing, and refactoring code for faster apps.

To enforce performance rules during a React code review, apply a prioritized, rule-based approach covering client-side data fetching and rendering. This enables automated guideline enforcement and code-generation prompts to steer consistent improvements across components and pages.

Refactoring Next.js components to eliminate waterfalls requires applying specific server-side performance and data-fetching patterns. This resource provides vetted rules to safely refactor code, ensuring reliable data fetching and optimized rendering performance.

Yes, these React performance patterns apply to both writing new code and refactoring existing pages. The rules cover components, data fetching, and bundle size, supporting automated refactoring and safe code generation across various scenarios.

The best way to reduce JavaScript bundle size in a Next.js application is to apply targeted performance rules. This resource provides specific bundle size and JavaScript performance patterns to iteratively optimize components and pages for faster load times.

A rule-based approach for React and Next.js code optimization solves the problem of scattered and hard-to-enforce performance guidance. It consolidates vetted engineering practices into a single resource, enabling safe code generation and consistent improvements.