vercel-react-best-practices

Start with the CRITICAL categories: eliminate async waterfalls using Promise.all and Suspense boundaries, then reduce bundle size by avoiding barrel imports and using next/dynamic for heavy components. Each rule file shows incorrect and correct code examples.

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

Yes, it includes server-side rules for RSC serialization deduplication, React.cache per-request memoization, LRU cross-request caching, and authenticating Server Actions like public API routes. It also warns against shared module state for request data.

Barrel files re-export thousands of modules, costing 200-800ms per import and slowing builds. Use Next.js optimizePackageImports for automatic transformation, or import directly from source paths in non-Next.js projects.

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.