vercel-react-best-practices

Start independent operations immediately without awaiting them, then use Promise.all() to await results together. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

Import directly from source files instead of barrel entry points, or use Next.js 13.5+ optimizePackageImports to transform imports automatically. Barrel files in libraries like lucide-react or @mui/material can load thousands of unused modules, adding 200-800ms to cold starts.

Use Suspense when only part of the page needs async data, so the layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where the overhead is not worthwhile.

Most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Some rules are Next.js-specific, such as Server Actions authentication, next/dynamic imports, and RSC serialization guidance.

Server Actions are exposed as public endpoints and can be invoked directly, bypassing middleware or layout guards. Always verify authentication and authorization inside each action, and validate inputs with a schema library like zod before performing mutations.