vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. Restructure server components with composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel entry points, which can load thousands of unused modules costing 200-800ms. In Next.js 13.5+, enable optimizePackageImports in next.config.js to transform barrel imports automatically at build time.

React.cache() deduplicates fetches within a single request, ideal for auth and database queries called multiple times per render. Use an LRU cache like lru-cache for data shared across sequential requests, especially with Vercel Fluid Compute.

Yes, the server-auth-actions rule requires authenticating and authorizing inside every Server Action, since they are publicly exposed endpoints like API routes. It also recommends validating inputs with schemas such as zod before performing mutations.

Common causes include defining components inside components, missing memoization of expensive work, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render rules cover functional setState, lazy initialization, transitions, and extracting memoized components.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when layout shift from loading states harms UX. The trade-off is faster initial paint versus potential content jumping.