vercel-react-best-practices

1. Eliminating Waterfalls — CRITICAL

• Defer await until needed — Move await into branches where actually used
• Parallelize independent operations — Use Promise.all() instead of sequential awaits
• Dependency-based parallelization — Use better-all for partial dependencies
• Start promises early in API routes — Start independent operations before awaiting
• Strategic Suspense boundaries — Use Suspense to stream content progressively

2. Bundle Size Optimization — CRITICAL

• Avoid barrel file imports — Import directly from source files; barrels add 200-800ms
• Dynamic imports for heavy components — Use next/dynamic for large components
• Defer non-critical third-party libs — Load analytics/logging after hydration
• Conditional module loading — Load modules only when feature is activated
• Preload on user intent — Preload heavy bundles on hover/focus

3. Server-Side Performance — HIGH

• Authenticate server actions — Verify auth inside each Server Action, not just middleware
• React.cache() for request dedup — Per-request deduplication on the server
• LRU cache for cross-request data — Share cached data across sequential requests
• Minimize RSC serialization — Only pass fields the client actually uses
• Parallel data fetching — Restructure components to parallelize server fetches
• after() for non-blocking work — Schedule logging/analytics after response is sent

4. Client-Side Data Fetching — MEDIUM-HIGH