vercel-react-best-practices

Eliminate sequential data-fetching waterfalls in Next.js by deferring awaits, parallelizing dependent tasks with Promise.all, and starting promises early in API routes and Server Actions. This approach removes blocking requests to improve load times.

Reduce React bundle size by avoiding barrel imports, using next/dynamic imports for non-critical libraries, and deferring heavy dependencies. Preloading components based on user intent further optimizes initial load performance.

React.cache deduplicates data fetches across server-side rendering requests, while Suspense boundaries handle async streaming. Combined with cross-request LRU caches, they minimize RSC serialization overhead and accelerate server rendering.

Next.js Server Actions slow down due to sequential awaits and server-client serialization bloat. Optimize them by starting promises early, parallelizing tasks, and minimizing serialized data passed across the RSC boundary.

Yes, you can automate audits of React components and Next.js API routes to identify blocking awaits, large initial imports, and RSC serialization bloat, generating targeted refactors to improve TTI and LCP.

Avoid next/dynamic imports for above-the-fold critical components required for initial render, as deferring them delays LCP. Reserve dynamic imports for non-critical libraries to prevent oversized initial bundles without hurting core metrics.