What is Streaming SSR, and how does renderToPipeableStream work in Node.js?

Short answer

It streams completed parts of HTML to the browser without waiting for the slowest parts of the page, reducing the time to first byte and first visible content.

Explanation

Using renderToPipeableStream in Node.js with React Suspense, the server immediately sends the page skeleton and Fallbacks to the browser. When slow data queries finish, it streams the final HTML along with a small script that inserts it in place without a reload.

Code example

// Use renderToPipeableStream on the server
import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/main.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // Start streaming the basic shell immediately
    },
    onError(error) {
      console.error(error);
    }
  });
});

Common mistakes

• Using the old renderToString function, which blocks the response and sends no bytes until the entire component tree is ready.

Follow-up questions

• What are React Server Components (RSC), and how do they fundamentally differ from SSR?
• What is Hydration, and what commonly causes a Hydration Mismatch?

Sources

• React docs — renderToPipeableStream