1---
2title: Parallel Data Fetching with Component Composition
3impact: CRITICAL
4impactDescription: eliminates server-side waterfalls
5tags: server, rsc, parallel-fetching, composition
6---
7 
8## Parallel Data Fetching with Component Composition
9 
10React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
11 
12**Incorrect (Sidebar waits for Page's fetch to complete):**
13 
14```tsx
15export default async function Page() {
16  const header = await fetchHeader()
17  return (
18    <div>
19      <div>{header}</div>
20      <Sidebar />
21    </div>
22  )
23}
24 
25async function Sidebar() {
26  const items = await fetchSidebarItems()
27  return <nav>{items.map(renderItem)}</nav>
28}
29```
30 
31**Correct (both fetch simultaneously):**
32 
33```tsx
34async function Header() {
35  const data = await fetchHeader()
36  return <div>{data}</div>
37}
38 
39async function Sidebar() {
40  const items = await fetchSidebarItems()
41  return <nav>{items.map(renderItem)}</nav>
42}
43 
44export default function Page() {
45  return (
46    <div>
47      <Header />
48      <Sidebar />
49    </div>
50  )
51}
52```
53 
54**Alternative with children prop:**
55 
56```tsx
57async function Header() {
58  const data = await fetchHeader()
59  return <div>{data}</div>
60}
61 
62async function Sidebar() {
63  const items = await fetchSidebarItems()
64  return <nav>{items.map(renderItem)}</nav>
65}
66 
67function Layout({ children }: { children: ReactNode }) {
68  return (
69    <div>
70      <Header />
71      {children}
72    </div>
73  )
74}
75 
76export default function Page() {
77  return (
78    <Layout>
79      <Sidebar />
80    </Layout>
81  )
82}
83```
84