vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all() instead of awaiting sequentially. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

Import directly from source files instead of barrel entry points that re-export thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform barrel imports while preserving TypeScript support.

Yes, it requires authenticating Server Actions like public API routes, since they are exposed endpoints. Always verify session and authorization inside each action rather than relying on middleware or layout guards.

Use React.cache() for per-request deduplication so the same fetch runs once per render pass. Use a cross-request LRU cache for data that can be shared across multiple requests, such as configuration or static content.

Avoid Suspense streaming for critical layout-determining data, SEO-critical above-the-fold content, and very fast queries where the overhead is not worthwhile. The trade-off is faster initial paint versus potential layout shift.