vercel-react-best-practices

To fix data fetching waterfalls in React Server Components, you should parallelize data fetching requests and use streaming-friendly Suspense boundaries to unblock rendering progressively rather than waiting for all data to load sequentially.

To reduce bundle size and improve TTI in Next.js, apply import discipline by avoiding barrel exports, use dynamic imports for heavy UI components, and conditionally defer loading non-critical dependencies to shrink the initial payload.

Optimize React Server Component and client boundaries by minimizing serialization, applying per-request deduplication with React.cache, and implementing safer client data handling strategies to effectively prevent hydration flicker.

Your Next.js app may render slowly on the server due to bloated bundles and sequential fetching, so you can improve LCP by applying direct imports, parallelizing data fetching, and using Suspense streaming to prioritize critical page content.

Yes, you can use this approach to review and refactor existing React codebases by systematically rewriting slow paths, refactoring RSC boundaries, and optimizing data fetching for APIs and Server Actions to improve throughput and latency.

Use per-request deduplication with React.cache to avoid redundant fetches within a single request, and apply cross-request caching like LRU when you need to persist data across multiple requests for safer and more efficient client data handling.