vercel-react-best-practices

To optimize React and Next.js performance, apply unified best practices for reducing bundle size, eliminating data-fetching waterfalls, and streamlining SSR/CSR transitions across components and pages.

Eliminating data fetching waterfalls in Next.js requires applying concurrent fetch patterns and optimizing server and client data retrieval to prevent sequential blocking during render transitions.

Prioritize web vitals fixes during a React refactor by categorizing performance patterns from critical to low impact, targeting bundle reduction and render optimization first for maximum effect.

Yes, you can use this approach for automated refactoring of client and server data fetches, utilizing the decision framework to guide code generation while ensuring security and correctness.

Yes, this Next.js optimization framework works with existing API routes and components, analyzing current codebases to identify bottlenecks and generate a prioritized plan across the front-end stack.