vercel-react-best-practices

To optimize React and Next.js performance, apply a structured set of best practices covering component design, server rendering, code-splitting, and bundle optimization to eliminate data fetching waterfalls and reduce bundle size.

Reducing bundle size in Next.js involves applying best practices like code-splitting, dynamic imports, and optimizing server and client rendering boundaries to safely minimize the JavaScript shipped to the user.

Server components and Suspense are needed when optimizing server and client rendering in React. They help eliminate data fetching waterfalls and accelerate user experience by structuring component design around high-performance patterns.

Yes, you can use code review and generation templates to enforce safe, high-performance React patterns during development and automated tooling, ensuring actionable performance guidelines are met across your workflows.

Yes, fixing React data fetching waterfalls is directly supported. The skill provides guided performance patterns and actionable checks to restructure component design and server rendering, eliminating sequential fetching slowdowns.