PromleeBlog
sitemapaboutMe

posting thumbnail
React SSR 완벽 가이드 1편 - 개념과 기본 흐름, React 18의 스트리밍 렌더링
React SSR Deep Dive Part 1 - Concept and Core Flow, React 18 Streaming Rendering

📅
🚀

들어가기 전에🔗

React 애플리케이션을 만들다 보면 "이걸 서버에서 렌더링할 수는 없을까?"라는 생각을 한 번쯤은 하게 됩니다. 특히 검색엔진 최적화(SEO), 첫 로딩 속도, 소셜 미디어 미리보기 등을 고려하다 보면 클라이언트에서만 렌더링하는 방식으로는 부족함을 느끼게 됩니다.
이럴 때 우리가 사용할 수 있는 기법 중 하나가 바로 SSR, 즉
Server-Side Rendering
입니다. 이번 시리즈에서는 SSR에 대해 깊이 있게 다루며, React 개발자 입장에서 SSR이 어떻게 동작하는지, 언제 사용하면 좋은지, 어떤 한계가 있는지를 단계별로 알아보겠습니다.
SSR의 개념과 SSR이 필요한 이유, 그리고 SSR이 실제로 어떻게 동작하는지를 차근차근 정리해보겠습니다. 또한, 이제 React 18에서 추가된 *스트리밍 렌더링(Streaming Rendering)*의 개념과 함께, 실제로 SSR이 어떻게 개선되었는지를 알아보겠습니다.
🚀

SSR이란 무엇인가요?🔗

SSR은 Server-Side Rendering의 줄임말로,
브라우저가 아닌 서버에서 HTML을 생성해서 보내주는 방식
입니다.
보통 React 같은 SPA(Single Page Application)는 클라이언트에서 JavaScript가 실행된 이후에야 콘텐츠가 나타나지만, SSR을 사용하면 서버에서 미리 HTML을 렌더링해서 클라이언트에게 보내줄 수 있습니다.
이렇게 하면 사용자는 화면을 더 빨리 볼 수 있고, 검색 엔진도 HTML을 바로 읽을 수 있어 SEO에도 유리합니다.
✅

클라이언트 렌더링과 비교해볼까요?🔗

예를 들어, 클라이언트 렌더링 방식은 다음과 같이 동작합니다:
  1. 브라우저가 HTML 파일을 다운로드합니다.
  2. HTML 안에 있는 JS 번들(script)을 불러옵니다.
  3. JS가 실행되어 React 컴포넌트를 렌더링합니다.
  4. 화면이 표시됩니다.
이 과정은 네트워크 환경이나 디바이스 성능에 따라 시간이 꽤 걸릴 수 있습니다. 반면, SSR은 아래와 같이 동작합니다:
  1. 사용자가 페이지에 접속하면 서버가 React 컴포넌트를 렌더링합니다.
  2. 렌더링된 HTML을 클라이언트에 전달합니다.
  3. 브라우저가 HTML을 받아 화면을 곧바로 보여줍니다.
  4. 이후 React의 hydrate 함수가 동작하여 클라이언트에서 인터랙티브한 앱으로 변환됩니다.
즉, SSR은 사용자에게 "빠르게 보이는 화면"을 제공하고, 클라이언트 측에서는 그 후에 자바스크립트를 통해 앱을 완성시키는 방식이라고 볼 수 있습니다.
🚀

SSR이 왜 필요할까요?🔗

SSR은 다음과 같은 경우에 유용하게 사용됩니다:
🚀

SSR의 기본 동작 흐름🔗

SSR의 동작 과정을 조금 더 구체적으로 살펴보겠습니다. 기본적인 SSR 흐름은 다음과 같습니다:
  1. 사용자가 웹사이트에 접속합니다.
  2. 서버는 사용자의 요청을 처리합니다.
  3. 서버에서 React 컴포넌트를 renderToString 혹은 renderToPipeableStream 등을 사용하여 HTML로 변환합니다.
  4. 변환된 HTML을 사용자에게 전송합니다.
  5. 브라우저는 이 HTML을 바로 렌더링하여 화면을 표시합니다.
  6. JavaScript가 다운로드되고, React의 hydrate 함수가 실행되어 앱이 인터랙티브하게 동작하기 시작합니다.
    여기서 핵심은
    서버에서 HTML을 만든 후 클라이언트에서 자바스크립트를 통해 앱의 생명을 불어넣는 과정
    입니다.
    다음 파트에서는 SSR의 렌더링 단계별 흐름을 더욱 깊이 있게 분석하고, React 18에서 도입된 renderToPipeableStream과 같은 최신 SSR 기능에 대해 자세히 살펴보겠습니다.
🚀

React 18에서 SSR은 무엇이 달라졌나요?🔗

기존의 SSR 방식은 서버에서 HTML 전체를 한 번에 만들어서 클라이언트에 전달했습니다. 이 방식은 간단하지만, HTML을 모두 다 만든 후에야 클라이언트가 응답을 받을 수 있기 때문에 사용자 입장에서 다소 느리게 느껴질 수 있습니다.
React 18에서는
부분적으로 렌더링된 HTML을 순차적으로 보내는 방식
, 즉
스트리밍 기반 SSR
을 도입하였습니다. 이렇게 하면 일부 콘텐츠가 준비되었을 때 먼저 전송하고, 나머지는 나중에 점진적으로 보여줄 수 있어 UX가 더 향상됩니다.
이러한 기능을 가능하게 해주는 것이 renderToPipeableStream입니다.
🚀

renderToPipeableStream이란?🔗

renderToPipeableStream은 React 18에서 새롭게 도입된 SSR 함수로, 서버에서 React 컴포넌트를 HTML로 렌더링할 때
스트리밍 방식
으로 출력할 수 있게 해줍니다.
쉽게 말해, "준비된 HTML부터 조금씩 먼저 보내주고, 아직 준비 안 된 부분은 나중에 채워주는 방식"입니다. 이를 통해 사용자는 페이지 전체가 준비되기 전이라도 콘텐츠 일부를 먼저 볼 수 있게 됩니다.
✅

기본 사용 예시🔗

아래는 Express.js와 함께 renderToPipeableStream을 사용하는 간단한 예시입니다:
import express from 'express';
import React from 'react';
import { renderToPipeableStream } from 'react-dom/server';
import App from './App';
const app = express();
app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    onShellReady() {
      res.setHeader('Content-Type', 'text/html');
      pipe(res);
    },
    onError(err) {
      console.error(err);
    }
  });
});
위 코드에서 onShellReady는 HTML의 기본 구조가 준비되었을 때 호출되며, 이때부터 바로 클라이언트로 데이터를 흘려보내기 시작합니다.
🚀

Suspense와의 연동🔗

React 18의 스트리밍 SSR에서 또 하나 중요한 점은 Suspense 컴포넌트와의 통합입니다. Suspense는 데이터를 불러오거나 컴포넌트를 로딩하는 동안 fallback UI를 보여주는 기능인데, 스트리밍과 함께 사용할 경우
로딩 가능한 부분부터 순차적으로 보여줄 수 있게
도와줍니다.
예를 들어 다음과 같은 구조를 생각해보겠습니다:
function App() {
  return (
    <div>
      <Header />
      <Suspense fallback={<div>Loading content...</div>}>
        <MainContent />
      </Suspense>
      <Footer />
    </div>
  );
}
이 구조에서 <Header />와 <Footer />는 바로 렌더링이 가능하지만 <MainContent />는 서버에서 데이터를 불러오는 데 시간이 걸린다고 가정해보겠습니다.
React 18의 스트리밍 SSR을 사용하면 Header와 Footer는 먼저 클라이언트에 전송되어 화면에 표시되고, MainContent는 준비가 되는 순간 나중에 채워지는 방식으로 동작합니다. 이렇게 하면 사용자 입장에서는 페이지가 점진적으로 빨리 보이기 때문에 더 쾌적하게 느낍니다.
🚀

주의할 점🔗

스트리밍 SSR은 매우 유용하지만 다음과 같은 주의 사항도 있습니다:
따라서 스트리밍 SSR은
부분 렌더링이 명확히 구분되는 구조
에 적용하는 것이 효과적입니다.
🚀

결론🔗

SSR의 개념과 필요성, 그리고 SSR이 기본적으로 어떻게 동작하는지를 알아보았습니다.React 18에서 새롭게 도입된 스트리밍 SSR의 핵심 기능인 renderToPipeableStream과 Suspense의 연동 방식에 대해 알아보았습니다. SSR은 단순히 서버에서 HTML을 렌더링해주는 기능을 넘어서, 사용자 경험과 SEO, 퍼포먼스 모두를 향상시키는 중요한 기술입니다.
이 방식은 사용자에게 더 빠르게 콘텐츠를 보여주기 위한 중요한 기술이며, 특히 데이터 로딩이 많은 페이지에서 유용하게 활용될 수 있습니다.
다음 파트에서는 SSR과 관련된 hydration, 서버 컴포넌트, 캐싱 전략 등에 대해 더 자세히 알아보겠습니다.
✅

참고🔗

🚀 들어가기 전에
🚀 SSR이란 무엇인가요?
✅ 클라이언트 렌더링과 비교해볼까요?
🚀 SSR이 왜 필요할까요?
🚀 SSR의 기본 동작 흐름
🚀 React 18에서 SSR은 무엇이 달라졌나요?
🚀 renderToPipeableStream이란?
✅ 기본 사용 예시
🚀 Suspense와의 연동
🚀 주의할 점
🚀 결론
✅ 참고