vercel-react-best-practices

Execute independent async operations concurrently with Promise.all() instead of sequential awaits, and start promises early in API routes before awaiting them. For partial dependencies, use better-all or chain promises so each task starts at the earliest possible moment.

Avoid importing from barrel files like lucide-react or @mui/material entry points, which can load thousands of modules and cost 200-800ms. In Next.js 13.5+, use optimizePackageImports; otherwise import directly from subpaths like @mui/material/Button.

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

Use Suspense when only part of a page needs async data, so the wrapper layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or fast queries where the 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 rules cover useMemo, useDeferredValue, functional setState, and transitions.