Streaming SSR 예제

← Server Components 예제로 돌아가기

🎯 Streaming SSR이란?

📊 로딩 순서 관찰하기

페이지를 새로고침하면 컴포넌트들이 로딩 시간에 따라 순차적으로 나타나는 것을 확인할 수 있습니다:

1. 빠른 데이터 (300ms)
2. 중간 데이터 (1.5s)
3. 느린 데이터 (3s)
4. 매우 느린 데이터 (5s)

빠른 데이터

300ms

이 데이터는 300ms 후에 로드됩니다.

✅ 이 컴포넌트는 가장 빠르게 로드되어 사용자가 즉시 볼 수 있습니다.

중간 속도 데이터

1500ms

이 데이터는 1.5초 후에 로드됩니다.

아이템 1
아이템 2
아이템 3
아이템 4

⏳ 이 컴포넌트는 빠른 컴포넌트 이후에 나타납니다.

느린 데이터

3000ms

이 데이터는 3초 후에 로드됩니다.

React
85%
Next.js
78%
TypeScript
92%
Node.js
70%

🐌 이 컴포넌트는 복잡한 처리로 인해 늦게 나타납니다.

복잡한 데이터 처리 중...

데이터 처리 진행률처리 중...

✅ Streaming의 장점

  • • 빠른 First Paint: 준비된 부분부터 즉시 표시
  • • 점진적 향상: 느린 부분이 완료되면 자동으로 업데이트
  • • 병렬 처리: 여러 데이터 소스를 동시에 처리
  • • 메모리 효율성: 필요한 부분만 순차적으로 렌더링

🎮 사용자 경험

  • • 즉각적 피드백: 빈 페이지 대신 부분적 콘텐츠
  • • 진행 상황 인식: 로딩 중임을 명확히 표시
  • • 상호작용 가능: 로드된 부분부터 상호작용 시작
  • • 체감 성능: 전체 로딩 시간과 무관한 빠른 경험

💡 Streaming SSR 구현 패턴

// 1. Suspense로 각 컴포넌트를 감싸기
<Suspense fallback={<LoadingComponent />}>
    <SlowServerComponent />
</Suspense>

// 2. 독립적인 Server Component 정의
async function SlowServerComponent() {
    const data = await fetchSlowData(); // 서버에서 데이터 페칭
    return <div>{data.content}</div>;
}

// 3. 다양한 로딩 UI 제공
function LoadingComponent() {
    return <div className="animate-pulse">로딩 중...</div>;
}

// ✅ 결과:
// - 각 컴포넌트가 준비되는 대로 표시
// - 사용자는 빈 페이지를 기다리지 않음
// - 전체 페이지 로딩 완료를 기다리지 않음

🔄 실험해보기: 페이지를 새로고침하여 각 컴포넌트가 다른 시점에 나타나는 Streaming 효과를 직접 체험해보세요! 개발자 도구의 Network 탭에서 HTML이 여러 청크로 전송되는 것도 확인할 수 있습니다.