Streaming SSR — React 18+ 서버 스트리밍 렌더링

Streaming SSR이란

전체 HTML을 한번에 보내는 대신, 준비된 부분부터 스트리밍합니다. TTFB(Time to First Byte)가 크게 단축됩니다.

구현

import { renderToPipeableStream } from "react-dom/server";

app.get("*", (req, res) => {
  const { pipe } = renderToPipeableStream(
    <App />,
    {
      bootstrapScripts: ["/client.js"],
      onShellReady() {
        res.statusCode = 200;
        res.setHeader("Content-Type", "text/html");
        pipe(res);  // 셸 준비되면 바로 스트리밍 시작
      },
    }
  );
});

Suspense와 결합

Suspense 경계 단위로 준비된 부분부터 스트리밍됩니다.