Streaming with Suspense

Learn to delay a section with a Suspense boundary.

Streaming with Suspense

The Suspense component shows a fallback while the child below is loading. When ready, the real content replaces it.

On the server Suspense becomes a streaming point: the fallback HTML is sent immediately and the slow section is appended to the stream when ready. The user never waits with an empty page.

Multiple Suspense boundaries enable independent streaming; each section arrives at its own pace.

Multiple boundaries

A page can have several Suspense boundaries. A parent boundary does not close until all child boundaries finish; but each child boundary streams at its own pace.

So a slow section does not block fast sections. Fast sections appear immediately and the slow one is appended when ready.

The fallback text should be short and meaningful; the user must know what they are waiting for.

Exercise Write the StreamPage component

Write StreamPage. Import Suspense. Inside <Suspense fallback={<p>Loading</p>}> show <SlowList />. Export it.

Show example solution

import { Suspense } from 'react';
import SlowList from './SlowList';

function StreamPage() {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <SlowList />
    </Suspense>
  );
}
export default StreamPage;

Test yourself

Fill in the blank: add a Suspense boundary

<Suspense fallback={<p>Loading</p>}>
  <____ />
</Suspense>

Show answer

<Suspense fallback={<p>Loading</p>}>
  <SlowList />
</Suspense>

When is the Suspense fallback shown?
- When the child is ready
- Only on error
- While the child is loading
- Never
Show answer

While the child is loading — The fallback appears during the wait.
Match Suspense concepts

fallback

Loading content
Suspense

Stream boundary
SlowList

Slow component
stream

Chunked flow

Next lesson: Edge rendering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies