vercel-react-best-practices

Start independent operations immediately without awaiting them, then await the promises later. Use Promise.all() for independent fetches and the better-all library for operations with partial dependencies, which can yield 2-10x improvement.

Import directly from source files instead of barrel entry points, or use Next.js 13.5+ optimizePackageImports to transform imports automatically. Libraries like lucide-react and @mui/material can load thousands of unused modules otherwise, costing 200-800ms per cold start.

Use Suspense when only part of the 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 very fast queries where overhead is not worth it.

Yes. It includes rules for authenticating Server Actions like public API routes, avoiding shared module state for request data, minimizing RSC serialization, per-request deduplication with React.cache(), and using after() for non-blocking operations.

The rules are guidelines, not universal mandates; several list explicit exceptions, such as keeping await order when side effects matter or skipping memoization for cheap primitives. They target React and Next.js specifically and do not cover other frameworks.