vercel-react-best-practices

To optimize React and Next.js performance, apply best practices covering bundle size reduction, server-side rendering improvements, and re-render optimization. These guidelines help refactor components and data-fetching strategies to resolve slow SSR and large bundles.

Eliminate data-fetching waterfalls in Next.js by parallelizing fetches within API routes. This technique avoids sequential blocking and pairs with per-request caching and safe data serialization to improve overall server-side performance.

Reduce React bundle size by using dynamic imports alongside Suspense boundaries. This combination defers loading non-critical JavaScript until required, minimizing the initial payload and improving user-perceived performance.

Yes, these React performance best practices are explicitly applicable when writing, reviewing, or refactoring Next.js pages. The guidelines provide guardrails and examples suitable for automated refactoring tasks across existing project codebases.

React components re-render unnecessarily due to improper state management or prop changes. Apply re-render optimization patterns from this catalog to identify bottlenecks, restructure components, and improve client-side data fetching and rendering performance.

Avoid dynamic imports when the module is critical for above-the-fold rendering or initial server-side load. Overusing Suspense boundaries for immediately needed content degrades user-perceived performance, so apply these patterns selectively for non-critical bundle size reduction.