Files
infinite-canvas/.agents/skills/vercel-react-best-practices/rules/server-parallel-nested-fetching.md
T
HouYunFei fb79a15508 docs(vercel-react-best-practices): 添加 Vercel React 最佳实践规则文档
- 添加 sections 定义文件,包含性能优化各领域分类
- 添加规则模板文件,规范文档结构和标签定义
- 添加异步操作优化规则,包括防止瀑布流、并行化、延迟等待等
- 添加包大小优化规则,包括避免桶式导入、动态导入、预加载等
- 添加服务端性能优化规则,包括 API 路
2026-05-21 15:22:11 +08:00

992 B

title, impact, impactDescription, tags
title impact impactDescription tags
Parallel Nested Data Fetching CRITICAL eliminates server-side waterfalls server, rsc, parallel-fetching, promise-chaining

Parallel Nested Data Fetching

When fetching nested data in parallel, chain dependent fetches within each item's promise so a slow item doesn't block the rest.

Incorrect (a single slow item blocks all nested fetches):

const chats = await Promise.all(
  chatIds.map(id => getChat(id))
)

const chatAuthors = await Promise.all(
  chats.map(chat => getUser(chat.author))
)

If 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.

Correct (each item chains its own nested fetch):

const chatAuthors = await Promise.all(
  chatIds.map(id => getChat(id).then(chat => getUser(chat.author)))
)

Each item independently chains getChatgetUser, so a slow chat doesn't block author fetches for the others.