vercel-react-best-practices

Apply impact-prioritized rules starting with eliminating async waterfalls using Promise.all() and Suspense boundaries, then reduce bundle size with direct imports and dynamic imports. The rules cover 8 categories from critical server-side fixes to incremental JavaScript micro-optimizations.

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

Barrel files re-export thousands of modules, costing 200-800ms per import on cold starts. Use Next.js optimizePackageImports config or direct path imports like @mui/material/Button to load only the modules you actually use.

Yes, it includes dedicated rules for RSC serialization, React.cache() per-request deduplication, avoiding shared module state across concurrent renders, and authenticating Server Actions like public API endpoints.

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.