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)
Read ONLY sections relevant to your task! Check the content map below and load what you need.
🔴 For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.
📑 Content Map
| File |
Impact |
Rules |
When to Read |
1-async-eliminating-waterfalls.md |
🔴 CRITICAL |
5 rules |
Slow page loads, sequential API calls, data fetching waterfalls |
2-bundle-bundle-size-optimization.md |
🔴 CRITICAL |
5 rules |
Large bundle size, slow Time to Interactive, First Load issues |
3-server-server-side-performance.md |
🟠 HIGH |
7 rules |
Slow SSR, API route optimization, server-side waterfalls |
4-client-client-side-data-fetching.md |
🟡 MEDIUM-HIGH |
4 rules |
Client data management, SWR patterns, deduplication |
5-rerender-re-render-optimization.md |
🟡 MEDIUM |
12 rules |
Excessive re-renders, React performance, memoization |
6-rendering-rendering-performance.md |
🟡 MEDIUM |
9 rules |
Rendering bottlenecks, virtualization, image optimization |
7-js-javascript-performance.md |
⚪ LOW-MEDIUM |
12 rules |
Micro-optimizations, caching, loop performance |
8-advanced-advanced-patterns.md |
🔵 VARIABLE |
3 rules |
Advanced React patterns, useLatest, init-once |
Total: 57 rules across 8 categories
🚀 Quick Decision Tree
What's your performance issue?
🐌 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
📊 Impact Priority Guide
Use this order when doing comprehensive optimization:
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
🔗 Related Skills
| Need |
Skill |
| API design patterns |
@[skills/api-patterns] |
| Database optimization |
@[skills/database-design] |
| Testing strategies |
@[skills/testing-patterns] |
| UI/UX design principles |
@[skills/frontend-design] |
| TypeScript patterns |
@[skills/typescript-expert] |
| Deployment & DevOps |
@[skills/deployment-procedures] |
✅ Performance Review Checklist
Before shipping to production:
Critical (Must Fix):
High Priority:
Medium Priority:
Low Priority (Polish):
❌ Anti-Patterns (Common Mistakes)
DON'T:
- ❌ 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
DO:
- ✅ 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
🧠 Knowledge Modules (Fractal Skills)
1---2name: nextjs-react-expert3description: React and Next.js performance optimization from Vercel Engineering.4---5
6# Next.js & React Performance Expert
7
8> **From Vercel Engineering** - 57 optimization rules prioritized by impact
9> **Philosophy:** Eliminate waterfalls first, optimize bundles second, then micro-optimize.
10
11---
12
13## 🎯 Selective Reading Rule (MANDATORY)
14
15**Read ONLY sections relevant to your task!** Check the content map below and load what you need.
16
17> 🔴 **For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.**
18
19---
20
21## 📑 Content Map
22
23| File | Impact | Rules | When to Read |
24|------|--------|-------|--------------|
25| `1-async-eliminating-waterfalls.md` | 🔴 **CRITICAL** | 5 rules | Slow page loads, sequential API calls, data fetching waterfalls |
26| `2-bundle-bundle-size-optimization.md` | 🔴 **CRITICAL** | 5 rules | Large bundle size, slow Time to Interactive, First Load issues |
27| `3-server-server-side-performance.md` | 🟠 **HIGH** | 7 rules | Slow SSR, API route optimization, server-side waterfalls |
28| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules | Client data management, SWR patterns, deduplication |
29| `5-rerender-re-render-optimization.md` | 🟡 **MEDIUM** | 12 rules | Excessive re-renders, React performance, memoization |
30| `6-rendering-rendering-performance.md` | 🟡 **MEDIUM** | 9 rules | Rendering bottlenecks, virtualization, image optimization |
31| `7-js-javascript-performance.md` | ⚪ **LOW-MEDIUM** | 12 rules | Micro-optimizations, caching, loop performance |
32| `8-advanced-advanced-patterns.md` | 🔵 **VARIABLE** | 3 rules | Advanced React patterns, useLatest, init-once |
33
34**Total: 57 rules across 8 categories**
35
36---
37
38## 🚀 Quick Decision Tree
39
40**What's your performance issue?**
41
42```
43🐌 Slow page loads / Long Time to Interactive
44 → Read Section 1: Eliminating Waterfalls
45 → Read Section 2: Bundle Size Optimization
46
47📦 Large bundle size (> 200KB)
48 → Read Section 2: Bundle Size Optimization
49 → Check: Dynamic imports, barrel imports, tree-shaking
50
51🖥️ Slow Server-Side Rendering
52 → Read Section 3: Server-Side Performance
53 → Check: Parallel data fetching, streaming
54
55🔄 Too many re-renders / UI lag
56 → Read Section 5: Re-render Optimization
57 → Check: React.memo, useMemo, useCallback
58
59🎨 Rendering performance issues
60 → Read Section 6: Rendering Performance
61 → Check: Virtualization, layout thrashing
62
63🌐 Client-side data fetching problems
64 → Read Section 4: Client-Side Data Fetching
65 → Check: SWR deduplication, localStorage
66
67✨ Need advanced patterns
68 → Read Section 8: Advanced Patterns
69```
70
71---
72
73## 📊 Impact Priority Guide
74
75**Use this order when doing comprehensive optimization:**
76
77```
781️⃣ CRITICAL (Biggest Gains - Do First):
79 ├─ Section 1: Eliminating Waterfalls
80 │ └─ Each waterfall adds full network latency (100-500ms+)
81 └─ Section 2: Bundle Size Optimization
82 └─ Affects Time to Interactive and Largest Contentful Paint
83
842️⃣ HIGH (Significant Impact - Do Second):
85 └─ Section 3: Server-Side Performance
86 └─ Eliminates server-side waterfalls, faster response times
87
883️⃣ MEDIUM (Moderate Gains - Do Third):
89 ├─ Section 4: Client-Side Data Fetching
90 ├─ Section 5: Re-render Optimization
91 └─ Section 6: Rendering Performance
92
934️⃣ LOW (Polish - Do Last):
94 ├─ Section 7: JavaScript Performance
95 └─ Section 8: Advanced Patterns
96```
97
98---
99
100## 🔗 Related Skills
101
102| Need | Skill |
103|------|-------|
104| API design patterns | `@[skills/api-patterns]` |
105| Database optimization | `@[skills/database-design]` |
106| Testing strategies | `@[skills/testing-patterns]` |
107| UI/UX design principles | `@[skills/frontend-design]` |
108| TypeScript patterns | `@[skills/typescript-expert]` |
109| Deployment & DevOps | `@[skills/deployment-procedures]` |
110
111---
112
113## ✅ Performance Review Checklist
114
115Before shipping to production:
116
117**Critical (Must Fix):**
118- [ ] No sequential data fetching (waterfalls eliminated)
119- [ ] Bundle size < 200KB for main bundle
120- [ ] No barrel imports in app code
121- [ ] Dynamic imports used for large components
122- [ ] Parallel data fetching where possible
123
124**High Priority:**
125- [ ] Server components used where appropriate
126- [ ] API routes optimized (no N+1 queries)
127- [ ] Suspense boundaries for data fetching
128- [ ] Static generation used where possible
129
130**Medium Priority:**
131- [ ] Expensive computations memoized
132- [ ] List rendering virtualized (if > 100 items)
133- [ ] Images optimized with next/image
134- [ ] No unnecessary re-renders
135
136**Low Priority (Polish):**
137- [ ] Hot path loops optimized
138- [ ] RegExp patterns hoisted
139- [ ] Property access cached in loops
140
141---
142
143## ❌ Anti-Patterns (Common Mistakes)
144
145**DON'T:**
146- ❌ Use sequential `await` for independent operations
147- ❌ Import entire libraries when you need one function
148- ❌ Use barrel exports (`index.ts` re-exports) in app code
149- ❌ Skip dynamic imports for large components/libraries
150- ❌ Fetch data in useEffect without deduplication
151- ❌ Forget to memoize expensive computations
152- ❌ Use client components when server components work
153
154**DO:**
155- ✅ Fetch data in parallel with `Promise.all()`
156- ✅ Use dynamic imports: `const Comp = dynamic(() => import('./Heavy'))`
157- ✅ Import directly: `import { specific } from 'library/specific'`
158- ✅ Use Suspense boundaries for better UX
159- ✅ Leverage React Server Components
160- ✅ Measure performance before optimizing
161- ✅ Use Next.js built-in optimizations (next/image, next/font)
162
163---
164
165## 🎯 How to Use This Skill
166
167## 🧠 Knowledge Modules (Fractal Skills)
168
169### 1. [For New Features:](./sub-skills/for-new-features.md)
170### 2. [For Performance Reviews:](./sub-skills/for-performance-reviews.md)
171### 3. [For Debugging Slow Performance:](./sub-skills/for-debugging-slow-performance.md)
172### 4. [Section 1: Eliminating Waterfalls (CRITICAL)](./sub-skills/section-1-eliminating-waterfalls-critical.md)
173### 5. [Section 2: Bundle Size Optimization (CRITICAL)](./sub-skills/section-2-bundle-size-optimization-critical.md)
174### 6. [Section 3: Server-Side Performance (HIGH)](./sub-skills/section-3-server-side-performance-high.md)
175### 7. [Section 4: Client-Side Data Fetching (MEDIUM-HIGH)](./sub-skills/section-4-client-side-data-fetching-medium-high.md)
176### 8. [Section 5: Re-render Optimization (MEDIUM)](./sub-skills/section-5-re-render-optimization-medium.md)
177### 9. [Section 6: Rendering Performance (MEDIUM)](./sub-skills/section-6-rendering-performance-medium.md)
178### 10. [Section 7: JavaScript Performance (LOW-MEDIUM)](./sub-skills/section-7-javascript-performance-low-medium.md)
179### 11. [Section 8: Advanced Patterns (VARIABLE)](./sub-skills/section-8-advanced-patterns-variable.md)