React 스트리밍: 최적화된 사용자 경험을 위한 점진적 서버 사이드 렌더링

웹 개발의 세계에서 빠르고 반응적인 사용자 경험을 제공하는 것은 매우 중요합니다. 사용자들은 웹사이트가 지연 없이 빠르게 로드되고 상호작용할 수 있기를 기대합니다. 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 React는 이러한 과제를 해결하기 위해 스트리밍 서버 사이드 렌더링(SSR)이라는 강력한 기술을 제공합니다. 이 글에서는 React 스트리밍 SSR의 개념을 깊이 있게 탐구하고, 그 이점, 구현 방법, 그리고 웹사이트 성능 및 사용자 경험에 미치는 영향을 살펴보겠습니다.

서버 사이드 렌더링(SSR)이란 무엇인가?

기존 클라이언트 사이드 렌더링(CSR)은 브라우저가 HTML, JavaScript 및 CSS 파일을 다운로드한 다음 클라이언트 측에서 콘텐츠를 렌더링하는 것을 포함합니다. 유연하지만, 이 방식은 사용자가 모든 리소스가 다운로드되고 JavaScript가 실행될 때까지 기다려야 콘텐츠를 볼 수 있으므로 초기 렌더링 지연을 초래할 수 있습니다. 반면에 SSR은 React 컴포넌트를 서버에서 렌더링하고 완전히 렌더링된 HTML을 클라이언트에 보냅니다. 이는 브라우저가 즉시 표시될 수 있는 완전히 형성된 HTML을 수신하므로 더 빠른 초기 로딩 시간을 가져옵니다.

기존 SSR의 한계

기존 SSR은 CSR에 비해 상당한 개선을 제공하지만, 그 자체의 한계가 있습니다. 기존 SSR에서는 클라이언트에 HTML이 전송되기 전에 전체 애플리케이션이 서버에서 렌더링되어야 합니다. 이는 특히 여러 컴포넌트와 데이터 종속성을 가진 복잡한 애플리케이션의 경우 병목 현상이 될 수 있습니다. 첫 바이트 시간(TTFB)이 높아 사용자에게는 느리게 느껴질 수 있습니다.

React 스트리밍 SSR의 등장: 점진적 접근 방식

React 스트리밍 SSR은 점진적 접근 방식을 채택하여 기존 SSR의 한계를 극복합니다. 스트리밍 SSR은 서버에서 전체 애플리케이션이 렌더링될 때까지 기다리는 대신, 렌더링 프로세스를 더 작은 청크로 분해하고 이 청크들을 사용 가능해지는 대로 클라이언트에 스트리밍합니다. 이를 통해 브라우저는 훨씬 더 일찍 콘텐츠를 표시하기 시작하여 체감 성능을 향상시키고 TTFB를 줄일 수 있습니다. 마치 레스토랑이 식사를 단계별로 준비하는 것과 같다고 생각해보세요. 전체 식사가 한 번에 준비될 때까지 기다리는 대신, 애피타이저가 먼저 나오고, 그 다음 메인 코스, 마지막으로 디저트가 제공되는 식입니다.

React 스트리밍 SSR의 이점

React 스트리밍 SSR은 웹사이트 성능 및 사용자 경험에 다양한 이점을 제공합니다:

• 더 빠른 초기 로딩 시간: HTML 청크를 클라이언트로 스트리밍함으로써 브라우저는 훨씬 더 일찍 콘텐츠를 표시하기 시작하여 체감 로딩 시간을 단축하고 사용자 참여도를 향상시킵니다.
• 첫 바이트 시간(TTFB) 개선: 스트리밍 SSR은 전체 애플리케이션이 렌더링될 때까지 기다리지 않고 초기 HTML 청크가 준비되는 즉시 전송하여 TTFB를 줄입니다.
• 향상된 사용자 경험: 더 빠른 초기 로딩 시간은 사용자 경험을 향상시킵니다. 사용자가 콘텐츠가 나타나기를 기다릴 필요가 없기 때문입니다.
• 더 나은 SEO: HTML이 서버에서 즉시 사용 가능하므로 검색 엔진이 콘텐츠를 더 효과적으로 크롤링하고 인덱싱할 수 있습니다.
• 점진적 하이드레이션: 스트리밍 SSR은 점진적 하이드레이션을 가능하게 합니다. 이는 HTML 청크가 스트리밍됨에 따라 클라이언트 측 React 코드가 점진적으로 이벤트 리스너를 첨부하고 애플리케이션을 상호작용 가능하게 만드는 것을 의미합니다.
• 향상된 리소스 활용: 렌더링 프로세스를 더 작은 청크로 분해함으로써 스트리밍 SSR은 서버의 리소스 활용을 개선할 수 있습니다.

React 스트리밍 SSR 작동 방식

React 스트리밍 SSR은 ReactDOMServer.renderToPipeableStream() API를 활용하여 HTML 청크를 클라이언트에 스트리밍합니다. 이 API는 서버의 응답 객체에 파이프될 수 있는 읽기 가능한 스트림을 반환합니다. 다음은 작동 방식에 대한 간략한 설명입니다:

1. 서버가 페이지 요청을 받습니다.
2. 서버는 ReactDOMServer.renderToPipeableStream()을 호출하여 React 애플리케이션을 스트림으로 렌더링합니다.
3. React 컴포넌트가 렌더링됨에 따라 스트림은 HTML 청크를 방출하기 시작합니다.
4. 서버는 스트림을 응답 객체에 파이프하여 HTML 청크를 클라이언트에 전송합니다.
5. 브라우저는 HTML 청크를 수신하고 점진적으로 표시하기 시작합니다.
6. 모든 HTML 청크가 수신되면 브라우저는 React 애플리케이션을 하이드레이트하여 상호작용 가능하게 만듭니다.

React 스트리밍 SSR 구현하기

React 스트리밍 SSR을 구현하려면 Node.js 서버와 React 애플리케이션이 필요합니다. 다음은 단계별 가이드입니다:

1. Node.js 서버 설정: Express 또는 Koa와 같은 프레임워크를 사용하여 Node.js 서버를 생성합니다.
2. React 및 ReactDOMServer 설치: react 및 react-dom 패키지를 설치합니다.
3. React 애플리케이션 생성: 서버에서 렌더링하려는 컴포넌트로 React 애플리케이션을 생성합니다.
4. ReactDOMServer.renderToPipeableStream() 사용: 서버 코드에서 ReactDOMServer.renderToPipeableStream() API를 사용하여 React 애플리케이션을 스트림으로 렌더링합니다.
5. 스트림을 응답 객체에 파이프: 스트림을 서버의 응답 객체에 파이프하여 HTML 청크를 클라이언트에 전송합니다.
6. 오류 처리: 렌더링 과정에서 발생할 수 있는 오류를 포착하기 위해 강력한 오류 처리를 구현합니다. 예상치 못한 동작을 방지하기 위해 서버 및 클라이언트 측에서 오류를 적절히 처리합니다.
7. 하이드레이션을 위한 스크립트 태그 추가: 클라이언트 측에서 React 애플리케이션을 하이드레이트하기 위해 HTML에 스크립트 태그를 포함합니다.

예제 코드 스니펫 (서버 측):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

예제 코드 스니펫 (클라이언트 측 - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

예제 React 앱 컴포넌트 (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>