Next.js & React Performance Expert

From Vercel Engineering - 57 optimization rules prioritized by impact Philosophy: Eliminate waterfalls first, optimize bundles second, then micro-optimize.

🎯 Selective Reading Rule (MANDATORY)

🔴 For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.

📑 Content Map

1-async-eliminating-waterfalls.md

2-bundle-bundle-size-optimization.md

3-server-server-side-performance.md

4-client-client-side-data-fetching.md

5-rerender-re-render-optimization.md

6-rendering-rendering-performance.md

7-js-javascript-performance.md

8-advanced-advanced-patterns.md

9-cache-components.md

use cache

cacheLife

cacheTag

🚀 Quick Decision Tree

🐌 Slow page loads / Long Time to Interactive
  → Read Section 1: Eliminating Waterfalls
  → Read Section 2: Bundle Size Optimization

📦 Large bundle size (> 200KB)
  → Read Section 2: Bundle Size Optimization
  → Check: Dynamic imports, barrel imports, tree-shaking

🖥️ Slow Server-Side Rendering
  → Read Section 3: Server-Side Performance
  → Check: Parallel data fetching, streaming

🔄 Too many re-renders / UI lag
  → Read Section 5: Re-render Optimization
  → Check: React.memo, useMemo, useCallback

🎨 Rendering performance issues
  → Read Section 6: Rendering Performance
  → Check: Virtualization, layout thrashing

🌐 Client-side data fetching problems
  → Read Section 4: Client-Side Data Fetching
  → Check: SWR deduplication, localStorage

✨ Need advanced patterns
  → Read Section 8: Advanced Patterns

🚀 **Next.js 16+ Performance (Caching & PPR)**
  → Read Section 9: Cache Components

📊 Impact Priority Guide

1️⃣ CRITICAL (Biggest Gains - Do First):
   ├─ Section 1: Eliminating Waterfalls
   │  └─ Each waterfall adds full network latency (100-500ms+)
   └─ Section 2: Bundle Size Optimization
      └─ Affects Time to Interactive and Largest Contentful Paint

2️⃣ HIGH (Significant Impact - Do Second):
   └─ Section 3: Server-Side Performance
      └─ Eliminates server-side waterfalls, faster response times

3️⃣ MEDIUM (Moderate Gains - Do Third):
   ├─ Section 4: Client-Side Data Fetching
   ├─ Section 5: Re-render Optimization
   └─ Section 6: Rendering Performance

4️⃣ LOW (Polish - Do Last):
   ├─ Section 7: JavaScript Performance
   └─ Section 8: Advanced Patterns

🔥 **MODERN (Next.js 16+):**
   └─ Section 9: Cache Components (Replaces most traditional revalidation)

🔗 Related Skills

@[skills/api-patterns]

@[skills/database-design]

@[skills/testing-patterns]

@[skills/frontend-design]

@[skills/typescript-expert]

@[skills/deployment-procedures]

✅ Performance Review Checklist

• No sequential data fetching (waterfalls eliminated)
• Bundle size < 200KB for main bundle
• No barrel imports in app code
• Dynamic imports used for large components
• Parallel data fetching where possible

• Server components used where appropriate
• API routes optimized (no N+1 queries)
• Suspense boundaries for data fetching
• Static generation used where possible

• Expensive computations memoized
• List rendering virtualized (if > 100 items)
• Images optimized with next/image
• No unnecessary re-renders

• Hot path loops optimized
• RegExp patterns hoisted
• Property access cached in loops

❌ Anti-Patterns (Common Mistakes)

• ❌ Use sequential

  await

  for independent operations
• ❌ Import entire libraries when you need one function
• ❌ Use barrel exports (

  index.ts

  re-exports) in app code
• ❌ Skip dynamic imports for large components/libraries
• ❌ Fetch data in useEffect without deduplication
• ❌ Forget to memoize expensive computations
• ❌ Use client components when server components work

• ✅ Fetch data in parallel with

  Promise.all()

• ✅ Use dynamic imports:

  const Comp = dynamic(() => import('./Heavy'))

• ✅ Import directly:

  import { specific } from 'library/specific'

• ✅ Use Suspense boundaries for better UX
• ✅ Leverage React Server Components
• ✅ Measure performance before optimizing
• ✅ Use Next.js built-in optimizations (next/image, next/font)

🎯 How to Use This Skill

For New Features:

1. Check Section 1 & 2 while building (prevent waterfalls, keep bundle small)
2. Use server components by default (Section 3)
3. Apply memoization for expensive operations (Section 5)

For Performance Reviews:

1. Start with Section 1 (waterfalls = biggest impact)
2. Then Section 2 (bundle size)
3. Then Section 3 (server-side)
4. Finally other sections as needed

For Debugging Slow Performance:

1. Identify the symptom (slow load, lag, etc.)
2. Use Quick Decision Tree above
3. Read relevant section
4. Apply fixes in priority order

📚 Learning Path

🔍 Validation Script

scripts/react_performance_checker.py

python scripts/react_performance_checker.py <project_path>

📖 Section Details

Section 1: Eliminating Waterfalls (CRITICAL)

Section 2: Bundle Size Optimization (CRITICAL)

Section 3: Server-Side Performance (HIGH)

Section 4: Client-Side Data Fetching (MEDIUM-HIGH)

Section 5: Re-render Optimization (MEDIUM)

Section 6: Rendering Performance (MEDIUM)

Section 7: JavaScript Performance (LOW-MEDIUM)

Section 8: Advanced Patterns (VARIABLE)

🎓 Best Practices Summary

1. Measure first - Use React DevTools Profiler, Chrome DevTools
2. Biggest impact first - Waterfalls → Bundle → Server → Micro
3. Don't over-optimize - Focus on real bottlenecks
4. Use platform features - Next.js has optimizations built-in
5. Think about users - Real-world conditions matter

• Every

  await

  in sequence = potential waterfall
• Every

  import

  = potential bundle bloat
• Every re-render = wasted computation (if unnecessary)
• Server components = less JavaScript to ship
• Measure, don't guess