Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Apply 62 React and Next.js performance optimization rules from Vercel Engineering
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
rules/server-parallel-nested-fetching.md
1---2title: Parallel Nested Data Fetching3impact: CRITICAL4impactDescription: eliminates server-side waterfalls5tags: server, rsc, parallel-fetching, promise-chaining6---78## Parallel Nested Data Fetching910When fetching nested data in parallel, chain dependent fetches within each item's promise so a slow item doesn't block the rest.1112**Incorrect (a single slow item blocks all nested fetches):**1314```tsx15const chats = await Promise.all(16chatIds.map(id => getChat(id))17)1819const chatAuthors = await Promise.all(20chats.map(chat => getUser(chat.author))21)22```2324If one `getChat(id)` out of 100 is extremely slow, the authors of the other 99 chats can't start loading even though their data is ready.2526**Correct (each item chains its own nested fetch):**2728```tsx29const chatAuthors = await Promise.all(30chatIds.map(id => getChat(id).then(chat => getUser(chat.author)))31)32```3334Each item independently chains `getChat` → `getUser`, so a slow chat doesn't block author fetches for the others.35