vercel-react-best-practices

React and Next.js performance best practices target critical bottlenecks like data-fetching waterfalls, bundle size, and server-side rendering. They provide a categorized rule set to guide writing, reviewing, and refactoring components for faster production apps.

To reduce bundle size in a Next.js application, apply prioritized performance patterns that optimize component imports and data-fetching logic. This framework helps identify and refactor heavy dependencies to minimize production bottlenecks.

Next.js server actions can improve data-fetching performance by shifting logic to the server. This framework includes rules for server-side performance to help you refactor data-fetching strategies and avoid client-side waterfalls.

This React performance guidance works for automated code reviews by defining a categorized rule set with frontmatter metadata. These automation-ready references can guide code generation and automated refactoring tasks.

You should refactor React components for performance when experiencing production bottlenecks or regressions. Applying a prioritized best-practices framework helps address waterfalls, bundle size, and server-side performance issues systematically.