SSR의 한계를 보완한 'Streaming SSR'에 대해 알아보자

들어가며

Next.js를 공부하던 도중 Streaming SSR이라는 개념을 접하게 되었다.
기존에 알고 있던 SSR 방식과 무엇이 다른지 궁금해져 정리해보았다.

 

✅ 웹 성능지표

본문으로 넘어가기 앞서, 먼저 '웹 성능지표 용어'에 대해 짚어나가야 한다.

• TTFB (Time to First Byte): 브라우저(클라이언트)가 서버에 요청을 보낸 후 첫 번째 바이트를 받기까지의 시간이다. 즉 요청을 보낸 후 다시 응답을 받기 시작한 시간이라고 보면 된다.
  
  
• FCP (First Contentful Paint): 페이지가 로드되기 시작한 시점부터 컨텐츠의 일부가 화면에 렌더링될 때까지의 시간이다. 요청에 대한 응답을 받기 전에는 유저가 화면에서 어떠한 컨텐츠도 볼 수 없기때문에 FCP는 중요한 지표로 여겨진다. (컨텐츠를 가지고오고있다는 로더가 보여지는 시점 역시 FCP 이다.)
• LCP (Largest Contentful Paint): 화면 내에서 가장 큰 콘텐츠 요소가 렌더링되는 시점이다. 일반적으로는 점진적으로 데이터를 받아오는 경우 순간순간 LCP가 변경되는데, 마지막 가장 큰 컨텐츠가 그려진 시간을 기준으로 한다.
  
  
• TTI (Time to Interactive): 페이지가 완전히 상호작용 가능한 상태가 되는 시점이다. 화면을 그리기만 해서는 상호작용이 불가능하기때문에 이 시간을 단축하는 것 역시 웹 성능 개선에 있어서 중요한 지표로 여겨진다.

 

Streaming SSR이란?

1. 기존 SSR(Server-Side Rendering)의 한계

SSR은 서버에서 HTML을 모두 완성한 후 클라이언트에 보내는 방식이다.
덕분에 첫 화면은 빠르게 보이지만, 다음과 같은 문제가 있다.

• 페이지가 무겁거나 데이터 요청이 많으면 서버 처리 시간이 길어짐
• 서버가 HTML을 완성하기 전까지 브라우저는 아무것도 받지 못함
• 이로 인해 TTFB(Time To First Byte) 가 길어지고
• 첫 화면이 그려지는 FCP(First Contentful Paint) 도 지연될 수 있음

즉, SSR은 초기 렌더링은 빠르지만, 서버 부담이 큰 페이지에서는 오히려 느려질 수 있다는 문제가 있다.

 

SSR에 대한 자세한 정리는

👉🏻 2025.12.08 - [Web] - 웹 렌더링 방식 4가지 비교: CSR·SSR·SSG·ISR

 

2. Streaming SSR의 등장

이 허점을 보완하기 위해 나온 것이 Streaming SSR이다.

기본 아이디어는 간단하다.

“서버가 HTML을 모두 완성할 필요 없이, 준비된 부분부터 실시간으로(Stream) 브라우저에게 전송하자”

 

3. Streaming SSR의 동작 방식

Streaming SSR은 다음과 같이 작동한다.

1. 서버는 HTML을 구성하면서 준비된 부분부터 바로 전송한다
2. 브라우저는 도착한 HTML 조각을 바로 렌더링할 수 있음
3. 서버는 남은 HTML을 계속해서 스트림 형태로 보내며 페이지를 완성함
4. Hydration 단계에서 JS가 로드되면 동적인 인터랙션이 붙음

즉, 서버는 “조각 단위로 렌더링”, 브라우저는 “도착하는 즉시 그리기” 한다.

 

4. Streaming SSR의 장점

• TTFB 감소
  서버가 첫 바이트를 훨씬 빨리 보낼 수 있음
• FCP 단축
  브라우저가 전체 HTML을 기다릴 필요 없이, 조각이 도착하는 즉시 렌더링 가능
• 서버 부하 분산
  HTML을 한 번에 만들지 않아 서버의 동기적 부담이 줄어듦
• 사용자 경험 향상
  페이지가 "점점 채워지는 느낌"으로 빠르게 보임

특히 데이터 페칭이나 무거운 컴포넌트가 포함된 페이지일수록 효과가 크다.

 

 

 

 

※ 모든 이미지는 Google NanoBanana로 생성한 이미지입니다

 

 

참고 자료

https://velog.io/@hamjw0122/Next.js-Hydration

 

[Next.js] Hydration

https://sangminnn.tistory.com/entry/%EB%8D%94-%EC%A2%8B%EC%9D%80-%EC%9C%A0%EC%A0%80-%EA%B2%BD%ED%97%98%EC%9D%84-%EC%9C%84%ED%95%9C-Streaming-SSR

더 좋은 유저 경험을 위한 Streaming SSR