vercel-react-best-practices

React and Next.js performance best practices involve eliminating data-fetching waterfalls, optimizing bundle size, and balancing SSR and CSR behavior to accelerate load times. This Skill provides a structured catalog of these patterns for writing, reviewing, and refactoring components.

To refactor Next.js pages and reduce bundle size, apply patterns for JavaScript efficiency, server-side and client-side data-fetching, and re-render improvements. The Skill provides concrete recommendations and checklists to restructure components for faster load times and responsiveness.

Review React code for performance regressions by checking for data-fetching waterfalls, bloated bundles, and inconsistent SSR or CSR patterns. The Skill serves as a practical guide for reviewers to enforce efficient architectures across React components, Next.js pages, and API routes.

Yes, this React performance catalog works with existing Next.js API routes and data-fetching flows. It provides real-world scenarios and concrete recommendations to audit and apply efficient patterns to your current components, pages, and data-fetching architectures without requiring external dependencies.

The best way to eliminate data-fetching waterfalls in Next.js applications is to apply structured performance patterns for server-side and client-side fetching. This Skill catalogs these proven patterns to help teams refactor data flows and improve overall speed and resource usage.