vercel-react-best-practices

To optimize React performance regressions, apply a catalog of 57 rules across 8 categories that address data fetching, code-splitting, and bundle-size issues. These patterns provide concrete guardrails to guide automated refactoring and eliminate waterfalls.

Data fetching waterfalls occur when sequential API calls block each other. You can eliminate them by parallelizing data fetches and using strategic suspenses, refactoring Next.js pages to load multiple data sources concurrently instead of sequentially.

Reducing bundle size requires selective imports, dynamic loading, and deferring third-party code. By applying precise import patterns, you can audit a React module and significantly decrease the amount of JavaScript shipped to the client.

Yes, you can use client-side data fetching guidance with SWR strategies to deduplicate requests and apply caching best practices. This ensures efficient data flow and prevents redundant network calls during component rendering.

Yes, server-side performance improvements include secure server actions, per-request caching, and efficient data flow. These patterns consolidate Vercel Engineering optimization techniques directly into your Next.js server components.

You should use code-splitting and dynamic loading for third-party code that is not immediately required on initial page load. Deferring these scripts prevents them from blocking rendering and helps minimize the main bundle size.