## 通过组件组合实现并行数据获取
React Server Components 在树中按顺序执行。通过组件组合进行重构,以实现数据获取的并行化。
**错误示例(Sidebar 等待 Page 的获取完成):**
tsx
export default async function Page() {
const header = await fetchHeader()
return (
)
}
async function Sidebar() {
const items = await fetchSidebarItems()
return
}
**正确示例(两者同时获取):**
tsx
async function Header() {
const data = await fetchHeader()
return
{data}
}
async function Sidebar() {
const items = await fetchSidebarItems()
return
}
export default function Page() {
return (
)
}
**使用 children prop 的替代方案:**
tsx
async function Layout({ children }: { children: ReactNode }) {
const header = await fetchHeader()
return (
)
}
async function Sidebar() {
const items = await fetchSidebarItems()
return
}
export default function Page() {
return (
)
}