react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use the better-all library for partial dependency chains. In Server Components, restructure with component composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel files like lucide-react or @mui/material entry points, which can load thousands of unused modules. Use next/dynamic for heavy components and defer non-critical third-party libraries until after hydration.

Yes, Next.js 13.5+ supports the experimental optimizePackageImports config option, which automatically transforms barrel imports into direct imports at build time. This lets you keep ergonomic imports while getting faster dev boot, builds, and cold starts.

React.cache() deduplicates fetches within a single request only, making it ideal for per-request queries like getCurrentUser. Use an LRU cache like lru-cache when data must persist across sequential requests, such as repeated user actions hitting multiple endpoints.

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 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 streamed content replaces the fallback.