📦 Streaming SSR vs 기존 SSR – HTTP 헤더 비교

헤더	Streaming SSR (RSC + Suspense)	기존 SSR	설명
`Content-Type`	`text/x-component`	`text/html; charset=utf-8`	RSC 전용 MIME 타입. React가 클라이언트에서 이걸 해석해서 컴포넌트로 hydration 함. 기존 SSR은 일반 HTML 응답
`Transfer-Encoding`	`chunked`	(없음) or 자동 설정	응답을 chunk 단위로 스트리밍 전송함. HTML 전체가 아닌, 일부만 먼저 보내고 나머지는 순차적으로
`Connection`	`keep-alive`	`close` 또는 생략	스트리밍 동안 연결을 유지해야 하므로, `keep-alive`로 명시. 기존 SSR은 응답 끝나면 바로 끊음
`Keep-Alive`	`timeout=5`	없음	서버가 커넥션을 최대 5초간 유지하면서 chunk 전송할 수 있음. Chunk가 없으면 timeout 후 종료
`Cache-Control`	`no-store`, `must-revalidate`	`public, max-age=0, s-maxage=0, must-revalidate` 등	Streaming SSR은 캐시를 피하기 위해 명시적으로 no-store. 기존 SSR도 no-cache일 수 있으나, 일부 ISR은 캐싱 허용
`Content-Encoding`	`gzip`	`gzip` or 없음	응답이 gzip으로 압축됨. Streaming에서도 압축된 chunk가 순차적으로 전달됨
`Vary`	`RSC`, `Next-Router-State-Tree`, ...	보통 `Accept-Encoding`, `Cookie` 등	Vercel CDN이나 클라이언트가 RSC 상태, 라우터 상태에 따라 다른 응답을 구분할 수 있도록 힌트 제공
`rsc` (Request 헤더)	`1`	없음	클라이언트가 React Server Component를 요청한다는 플래그. Next.js가 이걸 보고 RSC 응답 생성
`next-router-state-tree`	존재	없음	클라이언트 라우터 상태 트리를 서버에 전달해서 정확한 경로 매핑, prefetch 대응
`Accept`	`/`	동일	브라우저가 어떤 타입의 응답도 허용
`Accept-Encoding`	`gzip, deflate, br, zstd`	동일	어떤 압축 포맷을 브라우저가 수용 가능한지 전달
`Content-Length`	없음 (`chunked`이므로)	있음 (완료된 HTML의 총 크기)	Streaming은 총 길이를 모르기 때문에 생략되고, 대신 `chunked` 전송 사용

🔍 주요 핵심 차이 요약

헤더 역할	Streaming SSR	기존 SSR
MIME 타입	`text/x-component` → RSC	`text/html`
전송 방식	`chunked` → flush() 스트리밍	전체 응답 완료 후 전송
연결 상태	`keep-alive` → 연결 유지	응답 후 `close`
응답 길이	미정 (Content-Length 없음)	고정 길이 있음
캐시 정책	`no-store`, `must-revalidate`	필요에 따라 캐시 허용 가능
CDN 대응	`Vary: RSC, 라우터 상태` → 응답 다양화	단순 `Accept-Encoding`, `Cookie` 등

💡 참고: `Vary` 헤더의 역할

Streaming SSR에서 응답에 따라 이렇게 들어감:

Vary: RSC, Next-Router-State-Tree, Accept-Encoding

➡️ 이는 "RSC 여부", "라우터 상태", "압축 여부"에 따라 서버가 서로 다른 HTML chunk 조합을 전송할 수 있음을 명시함

➡️ CDN 캐싱에서 잘못된 응답 공유를 방지할 수 있음

🎯 결론 요약

Streaming SSR은 HTTP 레벨에서도 완전히 다른 방식으로 작동함

특히 text/x-component, chunked, rsc: 1, Vary 등은 기존 SSR에는 없는 Streaming 특화 헤더들이고,

이를 통해 브라우저와 Next.js가 HTML이 아닌 "컴포넌트 조각"을 주고받는 구조를 완성함

🔍 주요 핵심 차이 요약

💡 참고: Vary 헤더의 역할

🎯 결론 요약

💡 참고: `Vary` 헤더의 역할