vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all, or use better-all for partial dependency chains. In API routes, kick off auth and config fetches before awaiting either, cutting sequential round trips from three to one.

Import directly from source files instead of barrel entry points, such as lucide-react/dist/esm/icons/check instead of the package root. In Next.js 13.5+, configure experimental.optimizePackageImports to transform barrel imports automatically at build time.

React.cache deduplicates server-side work like database queries and auth checks within a single request, while SWR deduplicates client-side fetches across component instances. Next.js already memoizes fetch calls, so reserve React.cache for non-fetch async work.

Yes, several rules target RSC specifically, including minimizing serialization at server-client boundaries, parallel data fetching through component composition, and using after() for non-blocking operations. The patterns assume the Next.js App Router architecture.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are fast enough that suspense overhead is not worthwhile. The trade-off is faster initial paint versus potential layout shift.