vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependencies. Restructure Server Components with composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel files like lucide-react or @mui/material entry points, use next/dynamic for heavy components, and defer analytics or logging libraries until after hydration. Next.js 13.5+ offers optimizePackageImports for automatic transformation.

React.cache() deduplicates calls within a single request, ideal for authentication and database queries during one render. Use an LRU cache like lru-cache for data shared across sequential requests, especially with Vercel Fluid Compute where instances persist.

Yes, it includes dedicated rules for RSC boundaries: minimize serialization by passing only used fields to client components, avoid duplicate serialization from transformations like .toSorted(), and parallelize fetching through component composition.

Barrel files re-export thousands of modules, costing 200-800ms per import on cold starts and slowing builds since tree-shaking cannot optimize external packages. Direct imports load only the modules you use, improving dev boot by 15-70%.

Avoid Suspense when data drives layout decisions, for SEO-critical above-the-fold content, for small fast queries where overhead is not worth it, or when you want to prevent layout shift between loading and loaded states.