vercel-react-best-practices

Execute independent async operations concurrently with Promise.all() instead of sequential awaits. For partial dependencies, start promises early and await late, or use the better-all library to maximize parallelism automatically.

Avoid importing from barrel files like lucide-react or @mui/material entry points, which can load thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option; otherwise import directly from source file paths.

Yes, it includes server-side rules specific to RSC, such as minimizing serialization at RSC boundaries, avoiding shared module state for request data, per-request deduplication with React.cache(), and authenticating Server Actions like API routes.

Use Suspense to stream data-dependent sections while rendering the surrounding layout immediately, improving initial paint. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where overhead is not worthwhile.

Common causes include defining components inside components, missing memoization of expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render optimization rules provide 15 targeted fixes with code examples.

React.cache() only deduplicates within a single request, so it cannot share data across sequential requests. For cross-request caching, use an LRU cache like lru-cache, which is especially effective with Vercel Fluid Compute.