vercel-react-best-practices

Start independent operations immediately by creating promises before awaiting them, then use Promise.all() to await them together. For partial dependencies, chain dependent fetches off the initial promise or use the better-all library to maximize parallelism automatically.

Avoid barrel file imports from libraries like lucide-react or @mui/material, which can load thousands of unused modules. In Next.js 13.5+, use the optimizePackageImports config option; otherwise import directly from subpaths like @mui/material/Button.

Yes, most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side data fetching patterns. Next.js-specific rules cover Server Components, Server Actions, and next/dynamic, which only apply to Next.js projects.

React.cache() deduplicates fetches within a single request only. Use an LRU cache like lru-cache when data must persist across sequential requests, such as when a user triggers multiple endpoints needing the same data within seconds.

Server Actions are exposed as public endpoints just like API routes, so middleware or layout guards alone are insufficient. Always verify authentication and authorization inside each action, and validate inputs with a schema library like Zod before performing mutations.

Avoid Suspense when the data drives 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 in.