vercel-react-best-practices

Reference the rule categories by priority: start with eliminating waterfalls and bundle size optimization (CRITICAL), then server-side performance (HIGH). Each rule file contains incorrect and correct code examples you can apply directly to your components.

Use Promise.all() for independent operations, start promises early and await late in API routes, and apply dependency-based parallelization with better-all for partial dependencies. Strategic Suspense boundaries also let wrapper UI render while data streams in.

Yes, the rules specifically cover React Server Components, Server Actions, and Next.js features like next/dynamic, optimizePackageImports, after(), and React.cache(). Server-side rules address RSC serialization, authentication in Server Actions, and per-request deduplication.

Avoid barrel file imports from libraries like lucide-react and @mui/material, use next/dynamic for heavy components, defer non-critical third-party scripts until after hydration, and prefer statically analyzable import paths so bundlers can trace files narrowly.

Avoid Suspense when data is critical for layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when you want to prevent layout shift. The trade-off is faster initial paint versus potential content jumping.

Barrel files re-export thousands of modules, forcing 200-800ms import costs on every cold start and slowing builds. Tree-shaking cannot help when libraries are external, so use Next.js optimizePackageImports or direct path imports instead.