Next.js › Loading UI & Streaming with Suspense

How do you use multiple Suspense boundaries on the same page to stream different sections independently?

Intermediate

Answer

You wrap each slow loading section of your page in its own Suspense component with a specific fallback, letting each section stream in independently as soon as its own data is ready, rather than having one slow piece of data delay the appearance of everything else on the page.

<div>
  <Suspense fallback={<Skeleton />}>
    <UserProfile />
  </Suspense>
  <Suspense fallback={<Skeleton />}>
    <RecentOrders />
  </Suspense>
</div>

Real-world example An account page shows the user's profile information as soon as it loads, while their recent orders section, which takes longer to fetch, streams in separately without blocking the profile from appearing first.

Common follow-ups: Does the order of Suspense boundaries in the code affect the order they stream in?;How do you decide where to place Suspense boundaries for the best experience?

Data Fetching;Performance & Lazy Loading