Streaming with Suspense
- React course
- Expert
- Lesson 10/32
- 4 min
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.
Practice Write the StreamPage component
Write StreamPage. Import Suspense. Inside <Suspense fallback={<p>Loading</p>}> show <SlowList />. Export it.
Starter code
// Write the StreamPage component hereSample solution
import { Suspense } from 'react';
import SlowList from './SlowList';
function StreamPage() {
return (
<Suspense fallback={<p>Loading</p>}>
<SlowList />
</Suspense>
);
}
export default StreamPage;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Fill in the blank: add a Suspense boundary
<Suspense fallback={<p>Loading</p>}>
<____ />
</Suspense><Suspense fallback={<p>Loading</p>}>
<SlowList />
</Suspense>Explanation: A slow component goes inside Suspense.
2 When is the Suspense fallback shown?
- When the child is ready
- Only on error
- While the child is loading Correct answer
- Never
Explanation: The fallback appears during the wait.
3 Match Suspense concepts
| Term | Meaning |
|---|---|
fallback |
Loading content |
Suspense |
Stream boundary |
SlowList |
Slow component |
stream |
Chunked flow |