26 lines
3.9 KiB
Markdown
26 lines
3.9 KiB
Markdown
---
|
|
category: Other
|
|
tags: [auto-wikified, technical-documentation, other]
|
|
title: Streaming SSR
|
|
description: "Streaming SSR은 모든 데이터가 준비될 때까지 기다리지 않고, 렌더링된 쉘(Shell) HTML을 즉시 클라이언트에 전송한 뒤 데이터가 준비되는 대로 나머지 부분을 점진적으로 스트리밍하는 서버 사이드 렌더링 기법이다."
|
|
last_updated: 2026-05-04
|
|
---
|
|
|
|
# Streaming SSR
|
|
|
|
## 📌 Brief Summary
|
|
Streaming SSR은 모든 데이터가 준비될 때까지 기다리지 않고, 렌더링된 쉘(Shell) HTML을 즉시 클라이언트에 전송한 뒤 데이터가 준비되는 대로 나머지 부분을 점진적으로 스트리밍하는 서버 사이드 렌더링 기법이다. [1] 주로 React Server Components(RSC) 생태계 및 `Suspense`와 결합되어 비순차적(out-of-order) 스트리밍 기능을 제공한다. [2] 이를 통해 무거운 데이터베이스 쿼리를 기다리느라 빈 화면(Blank screen)만 보고 있어야 했던 기존 서버 렌더링의 한계를 극복하고 빠른 초기 화면 렌더링을 가능하게 한다. [1]
|
|
|
|
## 📖 Core Content
|
|
* **비순차적(Out-of-order) 스트리밍 메커니즘**: Streaming SSR은 단일 거대한 덩어리(blob)로 화면을 전송하는 대신 `Suspense` 경계선(boundary)을 활용하여 화면을 분할한다. [3, 4] `Suspense` 경계선 위에 있는 컴포넌트나 정적 콘텐츠는 먼저 즉시 렌더링되어 브라우저로 전송되며, 데이터 처리가 길어지는 컴포넌트는 'Loading...'과 같은 대체 UI(fallback)를 띄운다. [3] 이후 서버에서 데이터 처리가 완료되는 시점에 맞추어 완성된 청크(chunk)들을 푸시(push)한다. [2]
|
|
* **병렬 데이터 페칭(Parallel Data Fetching)**: 한 페이지 내에 데이터를 요청하는 3개의 각기 다른 서버 컴포넌트가 있더라도 부모/자식 간 의존성이 없다면 React는 이 데이터 로드들을 병렬로 실행한다. [3, 5] 덕분에 장시간 실행되는 쿼리가 화면 다른 부분의 렌더링을 차단(blocking)하지 않는다. [6]
|
|
* **점진적 하이드레이션(Progressive Hydration)**: 서버는 HTML 쉘과 함께 사용 가능한 서스펜스 경계의 JSX 청크가 생성되는 즉시 데이터를 전송한다. [1, 4] 클라이언트(브라우저)는 전체 페이지 코드가 전송되기를 기다릴 필요 없이 도착한 데이터 청크부터 즉각적으로 하이드레이션(Hydration) 작업을 시작할 수 있어 더욱 빠르게 대화형(interactive) 상태로 전환된다. [1, 4]
|
|
* **INP(Interaction to Next Paint) 성능 개선**: React Server Components와 Suspense 기반의 Streaming SSR을 결합하면, 초기 상호작용 속도 지표인 INP를 효과적으로 향상시킬 수 있다. [7]
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
* **워터폴(Waterfall) 발생 가능성**: 스트리밍 병렬 처리의 이점에도 불구하고 부모 컴포넌트와 자식 컴포넌트가 모두 데이터 로딩을 수행해야 할 때 부모 데이터에 의존성이 있다면, 자식 컴포넌트는 부모의 로딩이 완료될 때까지 데이터 로딩조차 시작할 수 없는 제약이 발생한다. [5] 이 구조적 문제를 해결하려면 컴포넌트 트리 더 높은 곳에서 데이터를 한꺼번에 로드하여 프로프(prop)로 내려주는 방식이 강제된다. [5]
|
|
* **아키텍처 및 멘탈 모델의 복잡성 증가**: RSC와 Suspense를 통한 Streaming SSR은 기존 SSR이나 클라이언트 사이드 렌더링 환경 대비 구현 복잡도가 크게 증가한다. [7, 8] 상태나 훅(Hook)을 사용하는 클라이언트 컴포넌트와 데이터 페칭을 수행하는 서버 컴포넌트를 명확히 분리·중첩시켜야 하는 구조(Interleaving)는 개발 편의성(Ergonomics)을 저해할 수 있으며, 개발자에게 가파른 학습 곡선을 요구한다. [7, 9]
|
|
|
|
|
|
---
|
|
*Last updated: 2026-05-03* |