vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of sequential awaits. For partial dependencies, use better-all or chain promises, and use Suspense boundaries so layout renders while data streams in.

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 optimizePackageImports; otherwise import directly from subpaths like @mui/material/Button.

Use next/dynamic with ssr: false for heavy components not needed on initial render, such as Monaco Editor or analytics libraries. This directly improves Time to Interactive and Largest Contentful Paint by deferring large chunks.

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

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 functional setState, useDeferredValue, and transitions.

Avoid Suspense when data is critical for layout decisions, SEO-critical above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift when content loads.