Parallel Data Fetching with Component Composition

Name: Parallel Data Fetching with Component Composition
Author: Vercel Engineering

serverrscparallel-fetchingcomposition

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

React Server Components handle data fetching sequentially when nested in a direct parent-child call stack. This pattern blocks downstream components from starting their network requests until the parent completes its data retrieval, creating a waterfall effect that inflates total load time. By lifting asynchronous data logic into independent leaf components and composing them at the page level, you initiate all data fetching requests concurrently. This architectural shift separates the lifecycle of individual data dependencies, allowing the server to resolve requests as soon as they are triggered. The result is a flatter execution tree where the slowest single fetch dictates the latency, rather than the cumulative sum of all sequential network calls across the entire view hierarchy.

When to Use This Skill

•Dashboard pages with multiple disconnected widgets
•Complex layouts requiring header, footer, and sidebar data simultaneously
•Multi-column views fetching from different external APIs or databases
•Dynamic content sections that do not depend on each other's response

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Fix my slow server component page load
“How to stop serial data fetching in React Server Components
“Parallelize server component data requests
“Avoid waterfalls in RSC
“Refactor component to fetch data in parallel

What this skill does

•Eliminates waterfall request chains in Server Components
•Encapsulates data fetching logic within specific component boundaries
•Enables concurrent execution of multiple independent data streams
•Supports composition patterns via children props or direct component nesting
•Optimizes server-side latency by overlapping I/O operations

When not to use it

✕When a child component requires the result of a parent's fetch to function
✕When strictly ordering the appearance of content is mandatory for user experience

Example workflow

Identify nested data fetch calls causing waterfall delays
Extract the child component's fetch logic into its own async component
Remove the await call from the parent component body
Render the child component directly within the parent JSX
Verify performance improvement using network or server logs

Prerequisites

–React Server Components architecture
–Async/await understanding
–Component composition patterns

Pitfalls & limitations

!Accidentally introducing dependencies between components that prevent parallelism
!Over-composing components can lead to complex prop-drilling or layout issues
!Debugging becomes harder as logs for concurrent fetches interleave

FAQ

Does this technique require client-side JavaScript?

No, this approach occurs entirely on the server and does not change the hydration or client-side bundle requirements.

What happens if one fetch fails in parallel mode?

The component throwing the error will be handled by the nearest React Error Boundary, similar to sequential execution.

Is this better than Promise.all?

Promise.all is useful when you have multiple fetches in one component, while component composition is better for structuring data across different UI sections.

How it compares

While manual Promise.all grouping requires declaring all fetch variables in the parent, component composition provides a cleaner, decoupled architecture that aligns with React's tree structure.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Parallel Data Fetching with Component Composition

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

**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>
  )
}

**Alternative with 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>
  )
}

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/server-parallel-fetching/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/server-parallel-fetching/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/server-parallel-fetching/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/server-parallel-fetching/SKILL.md