vercel-react-best-practices

React and Next.js performance improves by replacing waterfall fetches with parallel data fetching using Promise.all, adding Suspense boundaries, and applying per-request caching. This skill provides battle-tested guidelines for restructuring components and pages to eliminate bottlenecks across client and server boundaries.

Bundle optimization in Next.js uses lazy loading and dynamic imports to split code and defer non-critical chunks. This skill applies actionable patterns to audit existing components, identify serialization overhead, and reorganize imports to improve initial load and time-to-interactive metrics.

Server and client component structuring in Next.js relies on disciplined rendering boundaries, parallel data fetching on the server, and minimized serialization between layers. This skill enforces patterns that eliminate waterfalls and leverage server capabilities to accelerate client-side rendering.

Yes. These performance patterns apply to any React or Next.js codebase regardless of component library choice. The guidelines focus on refactoring data flow, lazy loading, and rendering optimization rather than component structure, making them compatible with existing dependencies.

Suspense and dynamic imports optimize React performance when components are non-critical or render below the fold. This skill guides when to add Suspense boundaries around data fetches and which components to split into dynamic imports to improve time-to-first-paint and time-to-interactive.

Common bottlenecks include waterfall data fetches, large initial bundles, and unoptimized serialization between server and client. This skill identifies and resolves these by providing refactoring rules for parallel fetching, code splitting, and per-request caching strategies.