Fetch in parallel

Start independent fetches together with Promise.all.

From next-best-practices, data-patterns.md.

Same requests, two awaits

Press Load page.

Sequential awaitBad
0 ms Idle
await a; await b; await c
Promise.allGood
0 ms Idle
await Promise.all([...])

// app/dashboard/page.tsx
export default async function Dashboard() {
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments(),
  ]);

  return <div>...</div>;
}

Sum versus max

Drag a latency.

SequentialBad
Promise.allGood

When one request needs another

Tick a dependency.

Await all in turnBad
Chain only dependentsGood
Valid

Why it matters, pros and cons

Why it matters

Awaits in turn cost the sum. Together they cost only the slowest.

Pros

  • Total time drops from sum to max.
  • One-line change, works everywhere on the server.
  • Real dependencies become visible.

Cons

  • Dependent calls must still wait; chain that pair.
  • Promise.all rejects on the first failure.
  • Still waits for the slowest; stream it with Suspense.