Streaming SSR: 서버 사이드 렌더링의 새로운 패러다임

이미지 출처 - https://frontenddesign.codelly.dev/guide/architecture/Streaming-Server-Side-Rendering.html#ssr%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9

들어가며

웹 애플리케이션의 성능과 사용자 경험을 개선하기 위한 다양한 렌더링 방식이 존재합니다. 그 중에서도 최근 주목받고 있는 Streaming SSR(Server-Side Rendering)에 대해 알아보겠습니다. 이 글에서는 Streaming SSR의 개념, 작동 방식, 그리고 실제 구현 시 고려해야 할 사항들을 자세히 살펴보겠습니다.

---

Streaming SSR이란?

Streaming SSR은 기존의 SSR과 달리, 서버에서 렌더링된 HTML을 한 번에 전송하는 것이 아니라 준비된 부분부터 점진적으로 스트리밍하는 방식입니다. 마치 유튜브 동영상을 버퍼링하면서 보는 것처럼, 웹 페이지도 필요한 부분부터 순차적으로 로드됩니다.

기존 SSR vs Streaming SSR

구분	기존 SSR	Streaming SSR
전송 방식	전체 HTML 한 번에 전송	HTML 조각 단위로 스트리밍
초기 로딩	모든 데이터 준비 후 전송	데이터 준비 즉시 전송
사용자 경험	전체 페이지 로딩 대기	부분적 콘텐츠 즉시 확인 가능

---

Streaming SSR 구현하기

React 18에서는 renderToPipeableStream API를 통해 Streaming SSR을 구현할 수 있습니다. 다음은 기본적인 구현 예시입니다:

import { renderToPipeableStream } from 'react-dom/server';

const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    res.setHeader('Content-Type', 'text/html');
    stream.pipe(res);
  },
});

주요 장점

1. 빠른 초기 로딩

   • TTFB(Time to First Byte) 개선
   • 사용자가 중요한 콘텐츠를 먼저 확인 가능

2. 효율적인 리소스 활용

   • 서버 리소스의 효율적 사용
   • 클라이언트의 점진적 렌더링

3. 향상된 사용자 경험

   • 페이지 로딩 중에도 상호작용 가능
   • 자연스러운 콘텐츠 전환

---

주의해야 할 점과 해결 방안

1. Hydration 불일치 문제

Streaming SSR에서 가장 주의해야 할 점은 서버와 클라이언트 간의 상태 불일치입니다. 이는 다음과 같은 상황에서 발생할 수 있습니다:

• 서버에서 렌더링된 데이터가 클라이언트 Hydration 시점에 변경된 경우
• 비동기 데이터 처리로 인한 UI 변화

2. 해결 방안

1. 데이터 동기화

   // Tanstack Query를 활용한 데이터 동기화 예시
   const { data } = useQuery({
     queryKey: ['todos'],
     queryFn: fetchTodos,
   });

2. Suspense 활용

   <Suspense fallback={<LoadingSpinner />}>
     <AsyncComponent />
   </Suspense>

3. 안정적인 fallback UI

   • 데이터 로딩 중에도 일관된 UI 제공
   • 사용자 경험 저하 방지

---

결론

Streaming SSR은 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있는 강력한 기술입니다. 다만, 구현 시 데이터 동기화와 Hydration 과정에서 발생할 수 있는 문제들을 신중히 고려해야 합니다. 적절한 상태 관리와 Suspense를 활용하면 이러한 문제들을 효과적으로 해결할 수 있습니다.

참고 자료

• React 18 공식 문서
• Tanstack Query 공식 문서
• React Suspense 공식 문서