Streaming SSR(서버 사이드 렌더링) 완벽 정리: 빠른 페이지 로딩을 위한 최적화 전략

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 초기에 HTML을 서버에서 렌더링하여 클라이언트로 전달하는 방식입니다. 그런데 전통적인 SSR은 서버에서 모든 데이터를 받아 HTML을 완성한 뒤에야 클라이언트에 보낼 수 있었습니다. Streaming SSR은 이 문제를 해결하기 위해 HTML 조각을 순차적으로 스트리밍하는 방식으로, 더 빠른 초기 로딩과 향상된 사용자 경험을 제공합니다.

---

1. Streaming SSR이란?

Streaming SSR은 서버에서 HTML을 한 번에 생성해 보내는 것이 아니라, 일부 렌더링 결과를 빠르게 전송하고, 추가 데이터 로딩이 필요한 부분은 뒤늦게 전송하는 점진적 렌더링 방식입니다. 이를 통해 사용자는 페이지의 중요한 콘텐츠를 먼저 확인할 수 있어, 초기 로딩 체감 속도가 빨라집니다.

✅ 핵심 개념: "Chunked Transfer" 또는 "HTML 스트리밍"을 통해, 사용자가 완전한 페이지가 로드되기 전에 중요한 부분부터 볼 수 있도록 하는 방식입니다.

 

---

2. 전통적인 SSR vs. Streaming SSR

구분	전통적인 SSR	Streaming SSR
렌더링 방식	서버에서 HTML 전체 생성 후 전송	HTML을 부분적으로 스트리밍하며 전송
초기 로딩 속도	초기 로딩까지 대기 필요	중요한 영역부터 빨리 렌더링 가능
사용자 경험	전체 페이지 로딩 전까지 빈 화면 혹은 로딩 상태	부분적으로 먼저 보여주어 체감 속도 상승
복잡도	구현 상대적으로 단순	React 18 이상의 환경에서 구현 가능, 약간 복잡

✅ 장점

• 첫 번째 페인트(First Paint)까지 걸리는 시간이 단축됨
• 사용자에게 빠른 응답성을 제공

❌ 단점

• 구현 복잡도 증가
• 일부 브라우저 환경 및 서버 설정이 필요할 수 있음

---

3. Streaming SSR이 중요한 이유

1. 사용자 체감 속도 향상: 중요한 콘텐츠를 먼저 제공해, 사용자가 실제로 페이지가 빨리 로드되는 느낌을 받습니다.
2. SEO 최적화: SSR 자체가 SEO에 유리한데, 스트리밍 기법을 적용하면 검색 엔진 크롤러도 빠르게 주요 콘텐츠를 인식할 수 있습니다.
3. 리소스 효율성: 서버가 HTML 전체를 생성하고 나서야 전송하는 기존 방식에 비해, 일부 HTML을 먼저 전송하고 백그라운드에서 나머지를 렌더링할 수 있어 트래픽 및 서버 자원 분산에 유리합니다.

---

4. Streaming SSR 구현 예시

React 18 이후, renderToPipeableStream() 및 renderToReadableStream() API를 활용하면 Streaming SSR을 쉽게 구현할 수 있습니다.

1) Node.js 환경에서의 예시

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

const app = express();

app.get('/', (req, res) => {
  // SSR 스트림 생성
  const { pipe } = renderToPipeableStream(<App />, {
    onShellReady() {
      // 중요한 콘텐츠가 준비되면 헤더를 설정하고 스트리밍 시작
      res.setHeader('Content-Type', 'text/html');
      pipe(res);
    },
    onError(error) {
      // 에러 핸들링 로직
      console.error(error);
    },
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

✅ onShellReady(): 초기에 중요한 콘텐츠(셸)가 준비되었을 때 스트림을 시작합니다.

2) Next.js에서의 예시

Next.js 13부터 app/ 디렉터리를 사용하면 부분적 렌더링(Streaming)이 가능해집니다.

// app/page.tsx
export default async function Page() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json());

  return (
    <>
      <h1>{data.title}</h1>
      <article>
        {data.body}
      </article>
      {/* ... 다른 컴포넌트들 ... */}
    </>
  );
}

Next.js가 내부적으로 React 18 스트리밍 API를 사용하여 SSR을 처리하므로, 추가 설정 없이도 스트리밍을 활용할 수 있습니다.

---

5. Streaming SSR 활용 시 주의 사항

1. 서버 환경: 서버에서 Chunked Transfer-Encoding을 지원해야 합니다.
2. 브라우저 지원: 대부분 최신 브라우저는 지원하지만, 구형 브라우저에서는 부분적으로 동작하지 않을 수 있습니다.
3. 에러 처리: 스트리밍 중 에러가 발생하면, 이미 전송한 HTML을 되돌릴 수 없으므로 로깅 및 Fallback UI 준비가 필요합니다.
4. 점진적 Hydration: 클라이언트에서 점진적으로 Hydration을 적용해야 하며, React 18의 새로운 서스펜스(Suspense) 기능과 궁합이 좋습니다.

---

6. 결론

Streaming SSR은 대규모 웹 애플리케이션에서 초기 로딩 속도와 사용자 경험을 획기적으로 향상시키는 강력한 기법입니다. React 18+, Next.js 등 최신 프레임워크를 활용하면 비교적 쉽게 도입할 수 있으니, 속도와 성능이 중요한 프로젝트라면 고려해 보세요!