Async Components

In Catmint, server components can be async functions. They can use await directly to fetch data, read files, or query databases. React streams the HTML as each component resolves.

Parallel Data Fetching

Multiple async components wrapped in <Suspense> load in parallel. Each one streams to the client as soon as it resolves, independent of the others.

User Profile
Recent Activity
System Stats

Sequential Fetching

Without Suspense boundaries between them, async components render sequentially — the parent awaits before rendering children. This component takes 1 second, then its child takes another second.

Sequential data

Nested Suspense

Suspense boundaries can nest. The outer shell loads first (500ms), then the inner detail loads (1500ms). Each level shows its own fallback.

Outer shell

Key Points

  • Server components can be async — use await directly
  • Wrap async components in <Suspense> for streaming
  • Parallel <Suspense> boundaries = parallel data loading
  • Without Suspense, async components block their children (waterfall)
  • Nested Suspense boundaries enable progressive loading patterns
  • All await data stays on the server — never sent to the client bundle