vercel-react-best-practices

Next.js performance optimization involves applying 57 rules across 8 categories, prioritizing critical patterns like async deferral, parallel data fetching, and dynamic imports. These guidelines reduce waterfalls, shrink bundles, and improve rendering efficiency.

The best way to prevent data fetching waterfalls in Next.js is using parallel data fetching patterns. By applying specific performance rules to your components and pages, you can reduce sequential requests and improve overall data loading efficiency.

To refactor React components and shrink bundle size, implement dynamic imports and bundle optimization rules. These practices guide automated code generation and refactoring to eliminate unnecessary code and improve loading performance.

Yes, you can use server actions to improve web performance in React. Performance optimization guidelines for React and Next.js include rules for server actions, helping teams enforce best practices across data fetching, bundling, and rendering scenarios.

Automated React code refactoring for performance is limited to 57 specific rules across 8 categories. While it guides refactoring and code generation for components, Next.js pages, and data fetching, complex architectural changes may require manual review.