What is streaming SSR?

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.

Exercise 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.

Show example solution

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

async function render() {
  const stream = await renderToReadableStream(<App />);
  return stream;
}
export default render;

Test yourself

What does streaming SSR speed up?
- JavaScript bundle size
- First contentful paint
- Build time
- Type checking
Show answer

First contentful paint — First HTML arrives fast, FCP shortens.

Fill in the blank: start the stream

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

const stream = await renderToReadable____(<App />);

Show answer

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

const stream = await renderToReadableStream(<App />);

Match streaming concepts

renderToReadableStream

Gives ReadableStream
Suspense

Stream boundary
bootstrapModules

Hydration JS
FCP

First contentful paint

Next lesson: Streaming with Suspense

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies