Parallel & Sequential Fetching

~20 min · Promise.all, waterfall, perf

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Sequential `await` 가 waterfall

각 줄의 await 가 이전 거 기다림. 200/300/250ms 짜리 독립 fetch 셋이 750ms render 됨. JavaScript 가 마법처럼 parallelize 안 함.

독립 fetch 는 `Promise.all` 로

A 가 B 에 의존 안 하면 같이 fire 하고 둘 다 기다려. 총 시간 = max, 합 아님.

Sequential 도 필요할 땐 ok

B 의 URL 또는 query 가 A 의 결과에 의존하면 (getUser(id) → getPostsByAuthor(user.id)), waterfall 의도적. 그거 피하려고 코드 비틀지 마.

Suspense 로 어쨌든 stream

Fetch 가 sequential 이어야 할 때도 Suspense boundary 가 page 를 stream 하게 해 — 사용자가 싼 부분 즉시 봄, 느린 부분 ready 시 도착.

Code

❌ Sequential — 느림·tsx

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

✅ Parallel — 빠름·tsx

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

정당한 waterfall·tsx

export default async function UserPostsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = await getUser(id);                     // user 먼저 필요
  const posts = await getPostsByAuthor(user.id);       // user 에 의존
  return <PostList user={user} posts={posts} />;
}

External links

Parallel routes & data

Exercise

Sequential await 셋 가진 Server Component 찾아. 독립적이면 Promise.all 로 변환, page-load 시간이 그에 맞게 떨어지는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousStatic vs Dynamic Detection Next →Streaming & Suspense

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.