Parallel & Sequential Fetching

Sequential `await` is a waterfall

Each await on its own line waits for the previous one. Three independent fetches at 200/300/250ms become a 750ms render. JavaScript doesn't magically parallelize them.

Independent fetches go in `Promise.all`

If A doesn't depend on B, fire them together and wait for both. Total time = max, not sum.

Sequential is fine when needed

If B's URL or query depends on A's result (getUser(id) → getPostsByAuthor(user.id)), the waterfall is intentional. Don't twist your code into knots to avoid it.

Suspense lets you stream waterfalls anyway

Even when fetches must run sequentially, Suspense boundaries let the page stream — the user sees the cheap parts immediately, the slower parts arrive when ready.

Parallelize only requests that are independent and whose downstream service can accept the concurrency. Start the Promises together, then wait as a group. Keep genuine dependencies sequential and place their slow subtree behind Suspense when the rest of the page can proceed. Maximum parallelism is not maximum throughput. A small database pool or rate-limited API can turn a burst into a longer queue. Include service capacity when deciding how wide to fan out. Trace three artificial delays sequentially and with Promise.all, then repeat with a constrained connection pool. Decide whether one failed request should cancel the group or whether separate error boundaries should preserve partial content.

Code

❌ Sequential — slow·tsx

export default async function Page() {
  const user = await getUser();           // 200ms
  const posts = await getPosts();          // 300ms
  const stats = await getStats();          // 250ms
  // Total: ~750ms
  return <Dashboard user={user} posts={posts} stats={stats} />;
}

✅ Parallel — fast·tsx

export default async function Page() {
  const [user, posts, stats] = await Promise.all([
    getUser(),
    getPosts(),
    getStats(),
  ]);
  // Total: ~max(200, 300, 250) = 300ms
  return <Dashboard user={user} posts={posts} stats={stats} />;
}

Legitimate waterfall·tsx

export default async function UserPostsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = await getUser(id);                     // need user first
  const posts = await getPostsByAuthor(user.id);       // depends on user
  return <PostList user={user} posts={posts} />;
}

Sequential `await` is a waterfall

Independent fetches go in `Promise.all`

Sequential is fine when needed

Suspense lets you stream waterfalls anyway

Code

External links

Exercise

Progress

Comments 0

Sequential await is a waterfall

Independent fetches go in Promise.all

Sequential is fine when needed

Suspense lets you stream waterfalls anyway

Code

External links

Exercise

Progress

Sequential `await` is a waterfall

Independent fetches go in `Promise.all`