vercel-react-best-practices

Start independent operations immediately without awaiting them, then use Promise.all() to await results together. For partial dependencies, use the better-all library or chain promises so dependent fetches start as early as possible.

Import directly from source files instead of barrel entry points, such as importing from 'lucide-react/dist/esm/icons/check' rather than 'lucide-react'. In Next.js 13.5+, use the optimizePackageImports config option to transform barrel imports automatically at build time.

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

Yes, several rules specifically address RSC patterns, including minimizing serialization at server-client boundaries, avoiding duplicate serialization in props, and parallel data fetching through component composition. These apply to Next.js App Router projects.

Common causes include defining components inside components, missing memoization of expensive computations, and broad effect dependencies. The re-render rules recommend extracting memoized components, using functional setState, narrowing effect dependencies, and using useDeferredValue for expensive derived renders.

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