React Academy · 강의

React SSR 내부 동작 이해하기

renderToString/renderToPipeableStream 경로와 클라이언트가 수화 작업을 이어받는 방식을 추적합니다.

레슨 1/412개 단계

React SSR 내부 동작 이해하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

SSR이 해결하는 문제

클라이언트 측 리액트는 렌더링하려면 JavaScript가 필요합니다. 사용자는 JavaScript가 로드되어 실행될 때까지 빈 페이지를 보게 됩니다. SSR은 서버에서 HTML을 미리 렌더링하므로 사용자가 즉시 콘텐츠를 볼 수 있고, 체감 성능과 검색 엔진 최적화가 향상됩니다.

renderToString

기존 SSR 프로그래밍 인터페이스인 renderToString(<App />)은 서버에서 컴포넌트 트리를 HTML 문자열로 동기 렌더링합니다.

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

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

클라이언트에서의 하이드레이션

HTML이 도착하면 브라우저가 이를 파싱하고 사용자 인터페이스를 렌더링합니다. 그런 다음 리액트의 hydrateRoot()가 이벤트 리스너를 연결하여 정적인 HTML을 상호작용 가능한 상태로 만듭니다. 이것이 하이드레이션입니다.

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

하이드레이션 중에 일어나는 일

리액트는 서버에서 렌더링된 DOM과 가상 DOM을 동시에 순회합니다. 두 구조가 일치하면 DOM을 건드리지 않고 리스너를 연결합니다. 서로 다르면 하이드레이션 경고를 기록하고 DOM을 수정합니다.

renderToPipeableStream

리액트 18의 스트리밍 프로그래밍 인터페이스는 데이터를 사용할 수 있게 되는 대로 HTML을 여러 조각으로 전송합니다. 따라서 서버가 아직 처리 중이어도 브라우저가 콘텐츠를 점진적으로 화면에 표시할 수 있습니다.

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

app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/bundle.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // starts streaming
    },
  });
});

Suspense와 스트리밍

스트리밍 SSR에서는 서스펜스 경계가 먼저 대체 콘텐츠를 스트리밍한 다음, 데이터가 준비되면 초기 HTML 전송을 막지 않고 콘텐츠로 교체합니다.

// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <UserProfile /> {/* streams after data loads */}
      </Suspense>
    </Layout>
  );
}

데이터 직렬화

서버에서 가져온 데이터는 클라이언트가 다시 가져오지 않고 하이드레이션 중에 읽을 수 있도록 serialized 상태로 HTML에 삽입해야 합니다.

// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');

// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`

// Client hydration reads:
const data = window.__INITIAL_DATA__;

환경 차이

서버 코드는 브라우저가 아니라 Node.js에서 실행됩니다. window, document, localStorage를 참조하는 코드는 서버에서 충돌합니다. typeof window !== 'undefined'로 보호하십시오.

const isBrowser = typeof window !== 'undefined';

function getTheme() {
  if (!isBrowser) return 'light'; // server-safe default
  return localStorage.getItem('theme') ?? 'light';
}

리액트 서버 컴포넌트와 SSR 비교

SSR은 각 요청마다 컴포넌트를 HTML로 렌더링합니다. 리액트 서버 컴포넌트(RSC)는 다릅니다. RSC는 JavaScript를 클라이언트로 전혀 전송하지 않고 비동기일 수 있지만, RSC에는 RSC 프로토콜을 지원하는 번들러(Next.js 등)가 필요합니다.

스트리밍의 성능 이점

스트리밍 SSR은 셸의 첫 바이트까지의 시간(TTFB)을 개선하고 선택적 하이드레이션을 가능하게 합니다. 브라우저는 전체 페이지 HTML의 스트리밍이 끝나기 전에 상호작용 가능한 영역을 하이드레이션할 수 있습니다.

빠른 확인

서버 HTML이 이미 존재할 때 리액트의 hydrateRoot()는 createRoot()와 달리 무엇을 하나요?

인터랙티브 레슨에서 답해보세요

복습

SSR은 JavaScript가 로드되기 전에 HTML을 전송하려면 renderToPipeableStream을 사용합니다. 클라이언트는 hydrateRoot()를 호출하여 서버 HTML에 이벤트 리스너를 연결합니다. 서스펜스를 사용하는 스트리밍 SSR은 셸을 먼저 전송하고 콘텐츠를 비동기적으로 채웁니다. 브라우저 프로그래밍 인터페이스는 typeof window !== 'undefined'로 보호하십시오.

무료로 시작

AI 튜터와 함께 React을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 88
레슨: 324

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“React SSR 내부 동작 이해하기” 강의는 무료인가요?

네 — “React SSR 내부 동작 이해하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“React SSR 내부 동작 이해하기”에서 뭘 배우나요?

renderToString/renderToPipeableStream 경로와 클라이언트가 수화 작업을 이어받는 방식을 추적합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“React SSR 내부 동작 이해하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기