Back to Plate

Parallel Nested Data Fetching

templates/plate-template/.agents/skills/vercel-react-best-practices/rules/server-parallel-nested-fetching.md

53.0.5820 B
Original Source

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):

tsx
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):

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