vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, start the dependent promise chain early or use the better-all library to maximize parallelism.

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 per cold start.

Yes, most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Next.js-specific rules cover Server Actions, RSC serialization, and next/dynamic, which only apply to Next.js projects.

React.cache() deduplicates fetches within a single request only. Use an LRU cache like lru-cache when the same data is needed across sequential requests, such as multiple user actions hitting different endpoints within seconds.

Server Actions are exposed as public endpoints just like API routes, so middleware or layout guards alone are insufficient. Always verify authentication and authorization inside each Server Action before performing mutations.

Avoid Suspense when the data drives layout decisions, when content is 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.