최신 React 18 + Next.js App Router 환경에서 도입된 Streaming SSR 개념과 실무 적용 전략을 정리한 문서입니다.

✅ Streaming SSR이란?

• *Streaming SSR (Server-Side Rendering)**은 서버에서 HTML 전체를 렌더링한 후 한 번에 전송하는 기존 SSR과 달리, 렌더링된 HTML 조각(chunk)을 점진적으로 클라이언트에 전송하는 방식입니다.

React 18의 ReactDOMServer가 지원하며, Next.js App Router에서 활용됩니다.

✅ 기본 동작 원리

1. 브라우저가 페이지 요청
2. 서버는 페이지 컴포넌트를 React로 렌더링
3. 각 <Suspense> 경계마다 HTML을 "부분적으로 flush()"
4. 클라이언트는 조각별 HTML을 받아 즉시 화면에 표시
5. 느린 부분은 나중에 따라 도착 (점진적 렌더링)

예시:

<Suspense fallback={<div>Loading...</div>}>
  <Component1 /> // 1초 delay
</Suspense>
<Suspense fallback={<div>Loading...</div>}>
  <Component2 /> // 2초 delay
</Suspense>

실행 흐름:

• 1초 후: Component1 렌더링
• 2초 후: Component2 렌더링

✅ 스트리밍이 작동하는 조건

• ✅ <Suspense> 사용 (flush 경계가 됨)