Summary - Streaming SSR
- React course
- Expert
- Lesson 12/32
- 5 min
Set up a structure that lazily loads a section with Suspense.
Summary - Streaming SSR
In this group you learned streaming SSR, streaming with Suspense and edge rendering.
renderToReadableStream sends the page in chunks; Suspense marks the streaming boundaries; the edge runtime lowers latency. The first contentful paint speeds up.
The user never waits with an empty screen; slow sections are appended to the stream when ready. Now you will write a streaming page.
Practice Write the StreamArticlePage component
Write StreamArticlePage. Import Suspense. Inside <Suspense fallback={<p>Loading</p>}> show <Article />. Export it.
Starter code
// Write the StreamArticlePage component hereSample solution
import { Suspense } from 'react';
import Article from './Article';
function StreamArticlePage() {
return (
<Suspense fallback={<p>Loading</p>}>
<Article />
</Suspense>
);
}
export default StreamArticlePage;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is true?
- Suspense is a streaming boundary Correct answer
- renderToString does streaming
- fallback is shown only on error
- Edge supports the fs module
Explanation: Suspense marks the streaming point.
2 Fill in the blank: import Suspense
import { ____ } from 'react';
<Suspense fallback={<p>...</p>}>
<SlowList />
</Suspense>import { Suspense } from 'react';
<Suspense fallback={<p>...</p>}>
<SlowList />
</Suspense>Explanation: Suspense is imported from the react package.
3 Match concepts
| Term | Meaning |
|---|---|
renderToReadableStream |
Gives ReadableStream |
Suspense |
Stream boundary |
edge |
Renders close |
fallback |
Loading content |