Streaming SSR

Streaming SSR
스트리밍 서버사이드 렌더링
React 18과 Next.js App Router 시대를 정의하는 렌더링 방식이다.
그냥 SSR(서버사이드 렌더링)과는 완전히 다른 ‘스트리밍 기반의 서버 렌더링’이다.
서버가 페이지의 일부분만 렌더링이 끝나도 조각(chunk) 단위로 즉시 브라우저로 전송하는 SSR 방식
즉, 완성된 뒤 한 번에 보내는 게 아니라, 만들어지는 대로 조금씩 보내는 SSR
쉽게 비유하면, 기존 SSR = 다 끓인 라면을 한꺼번에 내는 것, Streaming SSR = 면 먼저 주고, 국물 나중에 주는 것
사용자는 “완성되기 전부터 맛보기 가능” → 빠른 첫 렌더(First Paint)
Streaming SSR은 “서버가 React 컴포넌트를 렌더하면서, 완성된 부분부터 실시간으로 브라우저에 보내주는 SSR 방식”
React 18 + Suspense + Next.js App Router가 결합되어 빠른 초기 렌더링(First Paint)과 자연스러운 데이터 로딩을 동시에 구현한다.

동작 과정

React 18 + Next.js 기준

1. 브라우저가 /page 요청
2. 서버가 React 트리 렌더 시작
3. 먼저 완성된 부분을 HTML chunk로 전송
   ├─ <head>, <header>, skeleton 등
   └─ 아직 데이터 안 온 컴포넌트는 <Suspense fallback> 표시
4. 느린 컴포넌트가 준비되면 나중에 chunk로 전송
5. 브라우저가 받은 순서대로 DOM에 붙임
6. 클라이언트 hydration 진행

즉, 서버는 React 트리를 동시에 그리고 동시에 전송한다.