vercel-react-best-practices

To fix React waterfalls, audit Next.js pages for sequential awaits and restructure server components to use parallel data fetching. This eliminates request chains, reduces load times, and improves server-side rendering performance.

The best way to reduce bundle size is optimizing third-party imports to lower the initial JavaScript payload. Identify heavy dependencies and replace them with lighter alternatives or dynamic imports to shrink the client bundle.

To minimize RSC serialization payloads, optimize server-side data passing between server and client components. Avoid sending large objects across the server-client boundary and apply caching strategies to reduce redundant data serialization.

Use Suspense boundaries in Next.js when streaming server-side rendering to progressively reveal UI as data becomes available. Proper Suspense usage prevents blocking the entire page render and improves perceived load performance.

To optimize React re-renders, apply rule-driven guidance to identify unnecessary component updates. Use memoization, restructure state placement, and minimize prop changes to prevent excessive rendering cycles and improve client performance.

Yes, you can audit existing Next.js code by applying 57 rules across 8 categories to detect performance anti-patterns. It provides incorrect vs. correct code examples to enable automated refactoring and safe code generation.