vercel-react-best-practices

To optimize React and Next.js performance, apply over 50 targeted rules covering waterfall elimination, bundle size reduction, server-side rendering, and rendering optimizations to refactor slow-loading pages.

Best practices for reducing bundle size involve applying specific optimization rules that identify large dependencies and enforce correct implementation patterns, significantly lowering the final bundle payload.

Fixing server-side rendering waterfalls involves applying detailed rules that flatten data fetching sequences, eliminating cascading requests to improve server-side performance and reduce load times.

You can use these guidelines to refactor existing React components by referencing concrete examples of incorrect versus correct implementations, directly guiding AI agents and developers during code generation.

General React optimization rules may not cover advanced edge cases in complex Next.js applications, requiring developers to manually adapt the provided performance guidelines to their specific server-side and rendering architectures.

Server-side performance optimizations are needed when pages suffer from slow load times due to server-side waterfalls, requiring the application of specific rules to balance server and client rendering effectively.