vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, start promises early and chain dependent fetches, or use Suspense boundaries so layout renders while data streams in.

Import directly from source files instead of barrel entry points that re-export thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform barrel imports for libraries like lucide-react and @mui/material.

Use React.cache() for per-request deduplication so the same fetch runs once per render pass. Use a cross-request LRU cache for data shared across requests, but never store tenant-scoped data without keying it by organization.

Yes, it includes a rule requiring authentication and authorization checks inside every Server Action, treating them as public endpoints. Middleware or layout guards alone are insufficient because Server Actions can be invoked directly.

Common causes include defining components inside components, unstable callback props, and broad effect dependencies. Fixes include extracting memoized components, using functional setState, narrowing effect dependencies, and deferring non-urgent updates with useTransition or useDeferredValue.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are fast enough that the loading-to-content layout shift hurts UX more than the wait.