vercel-react-best-practices

Use Promise.all() for independent async operations and start promises early before awaiting them in API routes. For partial dependencies, use the better-all library, and apply Suspense boundaries so layout renders while data streams in.

Import directly from source files instead of barrel entry points, or use Next.js 13.5+ optimizePackageImports config to transform imports automatically. Barrel files in libraries like lucide-react or @mui/material can add 200-800ms import cost.

Yes, it includes server-side rules covering RSC serialization deduplication, React.cache() per-request deduplication, avoiding shared module state, and authenticating Server Actions like public API routes.

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

useMemo caches computed values but should be avoided for simple primitive expressions, while useDeferredValue defers expensive derived renders to keep inputs responsive. The rerender- rules cover when each applies.