Cursor rule

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