그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Rendering
Rendering

Streaming SSR에 대해 설명해 주세요.

실무3/5
설계4/5
인간3/5
기초2/5

면접관의 질문 의도

Streaming SSR을 "빠른 SSR" 정도로 외워 왔는지, 아니면 Suspense 경계·하이드레이션·캐싱과의 상호작용까지 풀 수 있는지를 가른다.

큐레이션 답변

학습 자료

전통 SSR은 모든 데이터가 모이고 HTML 한 덩어리가 완성될 때까지 응답을 시작하지 못한다. Streaming SSR은 React 18의 renderToPipeableStream/renderToReadableStream처럼 서버가 렌더 결과를 청크 단위로 흘려보내, 브라우저가 먼저 도착한 조각부터 그려 낸다. Suspense 경계 안쪽이 "아직 준비 안 됨"이면 그 부분은 fallback으로 흘리고, 데이터가 도착하는 즉시 해당 영역만 마저 보낸다. 그 결과 TTFB와 첫 콘텐츠 가시성이 빨라지지만, 하이드레이션 시점에 서버/클라이언트 상태가 어긋나면 mismatch가 그대로 노출된다.

좋은 답변 구조

  1. 01기존 SSR이 한 덩어리로 응답을 모아 보낸다는 한계부터 짚는다
  2. 02Streaming SSR이 청크 단위로 흘려보내는 동작을 단계 순서대로 보여 준다
  3. 03Suspense 경계 안쪽이 어떻게 fallback → 실제 콘텐츠로 갱신되는지 분기 동작을 설명한다
  4. 04하이드레이션 mismatch·캐싱 설계 같은 운영 시 주의점을 디버깅 포인트로 마무리한다

자주 실수하는 포인트

Streaming SSR을 "SSR을 그냥 빠르게 만든 것"으로 단순화한다
Suspense 경계 없이 스트리밍만 켜면 효과가 난다고 단정한다
TTFB가 좋아진다고만 답하고 하이드레이션 비용·mismatch 가능성은 빠뜨린다
캐싱(CDN·Edge)이 스트리밍 응답과 어떻게 충돌할 수 있는지 다루지 못한다

실무 맥락

  • 상단은 가벼운 콘텐츠지만 하단에 느린 추천·랭킹 데이터가 붙는 커머스 상세 페이지
  • 여러 데이터 소스를 합쳐 보여 줘야 해서 가장 느린 API가 전체 응답을 잡는 대시보드
  • 엣지 런타임에서 Suspense 기반 부분 렌더링으로 TTFB를 끌어내려야 하는 Next.js App Router 페이지

본인 경험에 녹이는 힌트

Suspense 경계를 다시 그어 "느린 한 조각" 때문에 화면 전체가 늦어지던 구조를 깨 본 경험이 있다면 경계 설계의 실제 효과로 풀어낼 수 있다

Streaming SSR 도입 후 하이드레이션 mismatch를 추적해 본 경험이 있다면 서버/클라이언트 상태 동기화 이야기로 이어갈 수 있다

CDN·Edge 캐싱과 스트리밍 응답을 함께 설계해 본 경험이 있다면 "스트리밍과 캐싱의 충돌" 사례로 보여 줄 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1하이드레이션 mismatch는 보통 어떤 원인에서 발생하고 어떻게 줄이나요
Q2Suspense 경계는 어떤 기준으로 잡아야 깜빡임이 줄어드나요
Q3스트리밍 응답을 CDN·엣지에서 캐싱하려면 어떤 전략이 필요한가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문