vercel-react-best-practices

To optimize React and Next.js performance during refactoring, apply engineering-driven best practices across 57 prioritized rules in 8 categories, focusing on eliminating waterfalls, bundle imports, and parallel data fetching.

Best practices for data fetching and bundle optimization in Next.js include eliminating waterfalls, fetching data in parallel, and optimizing bundle imports to maximize performance in real-world applications.

Yes, you can use these React performance rules for writing, reviewing, or refactoring React components and Next.js pages to enforce patterns that help teams write faster, more scalable UI code.

Prioritizing by impact improves web performance by guiding automated refactoring and code generation to target the most critical rules first, such as eliminating data waterfalls and optimizing bundle imports.

The best way to start applying Vercel best practices to an existing Next.js page is to apply the top CRITICAL rules first, starting with eliminating waterfalls, bundle imports, and parallel data fetching.

You should review automated refactoring for React component optimization when suboptimal patterns exist, but manually verify advanced rendering and server patterns to ensure they fit your specific real-world app architecture.