vercel-react-best-practices

Optimize React and Next.js performance by applying structured, priority-based guidelines covering bundle size reduction, server-side rendering, and data fetching. This approach enforces consistent refactoring patterns across components and pages to eliminate waterfalls and improve rendering speed.

Best practices for eliminating data fetching waterfalls in Next.js involve applying priority-based rules to client-side fetching and server-side rendering layers. This structured approach ensures parallel data retrieval patterns are enforced during code generation and review.

You can use these React performance guidelines for automated code reviews by integrating the 45 priority-based rules into CI pipelines. They support automated discovery and generation to provide performance-focused recommendations for new components and legacy refactoring.

This approach handles bundle size optimization for Next.js applications by enforcing categorized performance rules across the codebase. It targets rendering optimizations and data-fetching layers to ensure bundle size reduction patterns are consistently applied during development.

You do not need specific dependencies to apply Vercel React best practices. The guidelines operate as AI-friendly rules across existing React components and Next.js pages without requiring external tools, organizing optimizations by priority from critical to low.

You should prioritize server-side rendering performance over client-side data fetching based on eight priority rule categories ranging from critical to low. These guidelines help determine when to apply specific rendering optimizations to eliminate waterfalls and reduce bundle size.