vercel-react-best-practices

Fix async waterfalls in React Server Components by restructuring server and client logic to parallelize independent data fetching. You eliminate sequential request delays by deferring asynchronous operations to only where strictly needed.

Reduce bundle size in Next.js by avoiding barrel imports, using dynamic loading, and deferring non-critical libraries. Preloading components based on user intent further minimizes load costs without sacrificing initial rendering speed.

Optimize React.cache and RSC prop serialization by minimizing props passed across server and client boundaries. Apply React.cache or LRU caching correctly to prevent cross-request shared module state and improve SSR safety.

Use Suspense streaming and useTransition to improve UI responsiveness by avoiding unnecessary component remounting and effect subscriptions. Deferring non-critical UI updates keeps the main thread free during heavy rendering tasks.

Yes, you can use this approach for automated code review of Next.js performance. It diagnoses code to identify incorrect patterns, applying structured rules to refactor components and route handlers for performance-critical features.

Cross-request shared module state in Next.js happens when server-side data leaks between concurrent requests. You resolve this by correctly applying React.cache and ensuring RSC prop serialization avoids shared mutable state.