What is streaming SSR?
- React course
- Expert
- Lesson 9/32
- 4 min
Learn that rendering can be streamed in chunks.
What is streaming SSR?
Streaming SSR sends the page to the browser in chunks instead of waiting for all data. It works with renderToReadableStream or renderToPipeableStream.
The first HTML arrives immediately and slow sections are appended when ready. This notably shortens the first contentful paint (FCP).
In the Next.js App Router streaming is on by default; Suspense boundaries mark the streaming points.
renderToReadableStream
In a Node or Edge environment renderToReadableStream returns a ReadableStream. The browser reads this stream in chunks and progressively paints the page.
Options set bootstrapModules (client JS for hydration) and error handling. Hydration starts when the stream completes.
Unlike traditional renderToString, this method does not wait for the whole render.
Practice Write the render function
Write a render function. Import renderToReadableStream and App. Start the stream with const stream = await renderToReadableStream(<App />) and return stream. Export it.
Starter code
// Write the render function hereSample solution
import { renderToReadableStream } from 'react-dom/server';
import App from './App';
async function render() {
const stream = await renderToReadableStream(<App />);
return stream;
}
export default render;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does streaming SSR speed up?
- JavaScript bundle size
- First contentful paint Correct answer
- Build time
- Type checking
Explanation: First HTML arrives fast, FCP shortens.
2 Fill in the blank: start the stream
import { renderToReadableStream } from 'react-dom/server';
import App from './App';
const stream = await renderToReadable____(<App />);import { renderToReadableStream } from 'react-dom/server';
import App from './App';
const stream = await renderToReadableStream(<App />);Explanation: renderToReadableStream starts the stream.
3 Match streaming concepts
| Term | Meaning |
|---|---|
renderToReadableStream |
Gives ReadableStream |
Suspense |
Stream boundary |
bootstrapModules |
Hydration JS |
FCP |
First contentful paint |