vercel-react-best-practices

To optimize React and Next.js performance, apply over 50 rules across 8 categories to eliminate waterfalls, reduce bundle size, and improve server-side and client-side rendering efficiency.

Eliminating data waterfalls in Next.js involves applying specific rules for server-side and client-side data fetching to prevent sequential blocking requests and improve rendering performance.

Reduce React bundle size by using dynamic imports for heavy components and deferring non-critical third-party libraries, following specific optimization rules to minimize initial load payload.

Yes, you can use these React optimization rules to guide AI agents in code generation, ensuring that newly created React and Next.js components automatically adhere to performance best practices.

Refactor existing React components for better rendering performance by applying comprehensive guidelines that target rendering efficiency, data fetching improvements, and bundle size reduction.

General React best practices may not address Next.js specific limitations like server-side data fetching waterfalls, so applying targeted Next.js optimization rules ensures both client and server rendering are optimized.