컴포넌트 구성으로 병렬 데이터 페칭

Overview

React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.

Impact

• Priority: CRITICAL
• Performance: eliminates server-side waterfalls

Problem

When parent component awaits data, child component data fetching gets blocked.

Incorrect (Sidebar waits for Page's fetch to complete)

export default async function Page() {
  const header = await fetchHeader()
  return (
    <div>
      <div>{header}</div>
      <Sidebar />
    </div>
  )
}

async function Sidebar() {
  const items = await fetchSidebarItems()
  return <nav>{items.map(renderItem)}</nav>
}

Correct (both fetch simultaneously)

async function Header() {
  const data = await fetchHeader()
  return <div>{data}</div>
}

async function Sidebar() {
  const items = await fetchSidebarItems()
  return <nav>{items.map(renderItem)}</nav>
}

export default function Page() {
  return (
    <div>
      <Header />
      <Sidebar />
    </div>
  )
}

How It Works

React starts parallel execution for async components at the same level.

Using children prop

async function Layout({ children }: { children: ReactNode }) {
  const header = await fetchHeader()
  return (
    <div>
      <div>{header}</div>
      {children}
    </div>
  )
}

async function Sidebar() {
  const items = await fetchSidebarItems()
  return <nav>{items.map(renderItem)}</nav>
}

export default function Page() {
  return (
    <Layout>
      <Sidebar />
    </Layout>
  )
}

Layout and Sidebar fetches start simultaneously.

Key Points

• Split components: Separate data fetching into components
• Parallel execution: Same-level async components run in parallel
• Use composition: Leverage children, props for component composition
• Eliminate waterfalls: Convert sequential to parallel execution

Performance Improvement

Incorrect approach:
Header    ████████
           ↓
Sidebar           ████████
Total: 16s

Correct approach:
Header    ████████
Sidebar   ████████
Total: 8s (50% reduction)

---

Tags: server, rsc, parallel-fetching, composition