React 서버 컴포넌트 심층 분석!

ppogeul 2024. 10. 22. 22:07

2024. 10. 22. 22:07

들어가며

최근 Allini 프로젝트를 진행하면서 몇 가지 고민이 생겼습니다.

over-fetching, waterfall 현상으로 인한 성능 저하, 그리고 무엇보다 빠른 시장 검증을 위해 다양한 라이브러리를 활용해야 하는 상황에서 발생하는 번들 사이즈 증가 문제였죠.

좋은 개발자는 단순히 모든 것을 손수 처음부터 구현하는 것이 아니라, 적절한 라이브러리를 선택하고 조잡해 빠르게 제품을 만들어내는 능력이 중요하다고 생각합니다.

하지만 이러한 접근은 필연적으로 번들 사이즈 증가라는 문제를 동반하게 되었고, 이는 제가 React 서버 컴포넌트에 관심을 갖게 된 주된 계기가 되었습니다!

1. React 서버 컴포넌트의 현재 사용 가능 여부

현재 상태

React 18 버전: 서버 컴포넌트 미지원
React 19 RC(Release Candidate): 서버 컴포넌트 지원

하지만 현재 React 18.2.0을 사용중인 프로젝트에서 서버 컴포넌트를 직접 사용하기는 어렵습니다.

React 19로의 업그레이드를 고려해볼 수 있지만, RC 버전이기 때문에 프로덕션 환경에서의 사용은 신중히 결정해야 합니다.

2. SSR과 서버 컴포넌트의 관계

학습 초기에 가장 헷갈렸던 개념입니다!

SSR (Server-Side Rendering)

목적: 초기 페이지 로드 성능 개선 및 SEO 최적화
동작 방식:
- 서버에서 전체 페이지의 초기 HTML을 생성
- 클라이언트로 HTML과 JS 번들을 전송
- 클라이언트에서 hydration 과정을 통해 인터랙티브한 앱으로 전환

이전 React 공식 문서에 따르면, React의 서버 사이드 렌더링 메서드들은 크게 세 가지 환경으로 구분됩니다:

Node.js Streams 환경용:

renderToPipeableStream()
renderToNodeStream() (Deprecated)
renderToStaticNodeStream()

Web Streams 환경용 (브라우저, Deno, modern edge runtimes):

renderToReadableStream()

스트림을 지원하지 않는 환경용:

renderToString()
renderToStaticMarkup()

기존 SSR의 동작 방식은 아래와 같습니다.

// 기존 SSR의 동작 방식
// 1. 서버에서 초기 렌더링
const app = ReactDOMServer.renderToPipeableStream(<App />);
// 한번에 전체 HTML을 생성하여 클라이언트로 전송

// 2. HTML 문서에 삽입
const html = `
  <!doctype html>
  <html>
    <body>
      <div id="root">${app}</div>
      <script src="/bundle.js"></script>
    </body>
  </html>
`;

공식 문서에 따르면, renderToPipeableStream을 통해 초기 셸(shell)을 렌더링하고 전송합니다.

renderToPipeableStream의 기본 개념은 아래와 같습니다.

Node.js 환경에서 React 트리를 HTML 스트림으로 변환하는 API입니다.
점진적인 로딩이 가능한 스트리밍 SSR을 구현할 수 있습니다.

예시 코드

// 발전된 SSR (스트리밍 방식)
const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],
  onShellReady() {
    // 1. 먼저 기본 뼈대(shell)를 보냄
    // 초기 shell(Suspense 경계 위의 콘텐츠)이 준비되면 스트리밍 시작

    pipe(response);
  },
  onAllReady() {
    // 모든 콘텐츠가 준비되면 호출 (크롤러나 정적 생성용)
  }
});

기존의 renderToString은 제한적인 기능을 제공하는 반면, renderToPipeableStream은 Suspense를 완전히 지원하고 HTML 스트리밍이 가능한 더 발전된 형태의 SSR 방식입니다.

주요 차이점:

기존 SSR: 모든 데이터를 다 모아서 한번에 보냄 (느림)
새로운 SSR:
1. 먼저 페이지의 기본 뼈대를 보내고
2. 나머지 내용은 준비되는 대로 조금씩 보냄 (더 빠름)

쉽게 말하면, 기존 SSR은 "식당에서 모든 요리가 완성될 때까지 기다렸다가 한번에 서빙"하는 것이고, 새로운 방식은 "준비된 메뉴부터 먼저 서빙하고, 나머지는 완성되는 대로 가져다주는" 것과 비슷합니다.

React 서버 컴포넌트 (RSC)

목적: 번들 사이즈 최적화 및 서버 리소스 직접 접근
동작 방식:
- 특정 컴포넌트를 서버에서만 실행되도록 지정
- 서버에서 렌더링된 결과만 클라이언트로 전송
- JS 번들에 서버 컴포넌트 코드는 미포함

두 기술의 상호보완적 관계

SSR과 서버 컴포넌트는 서로를 대체하는 기술이 아닌, 보완하는 기술입니다:

역할 분담
- SSR: 초기 페이지 로드 시 전체 HTML 생성
- 서버 컴포넌트: 특정 컴포넌트들의 서버 실행 및 번들 크기 최적화

3. 프레임워크들의 서버 컴포넌트 구현

Next.js의 접근

Next.js는 자체적인 서버 컴포넌트 구현을 통해 React의 실험적 기능을 안정적으로 제공합니다.

React 코어 팀과 Next.js 팀의 협력
- React 코어 팀의 주요 멤버들(Joe Savona, Sebastian Markbåge 등)이 Vercel(Next.js)에 합류
- 이를 통해 React의 실험적 기능을 Next.js에서 먼저 안정적으로 구현 가능
서버 컴포넌트의 발전 과정
- 2020년: React 팀이 서버 컴포넌트 개념 첫 발표
- React 18: 서버 컴포넌트 기초 인프라 포함, but 완전한 구현은 아님
- Next.js 13: App Router와 함께 서버 컴포넌트 전면 도입

기술적 구현 방식

React의 Server Components에 대한 공식문서를 보면,

문서에서는 Server Components 구현에 대해 다음과 같이 언급하고 있습니다:

"To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future."

이는 Server Components 구현을 위한 번들러 API가 아직 완전히 안정화되지 않았음을 시사합니다.

Next.js는 다음과 같은 방식으로 서버 컴포넌트를 구현했습니다:

// next.config.js
{
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 서버 컴포넌트 처리
      config.plugins.push(new webpack.DefinePlugin({
        // marked, sanitize-html 같은 서버 전용 라이브러리들이
        // 클라이언트 번들에 포함되지 않도록 처리
        'process.env.SERVER_ONLY': JSON.stringify(true)
      }));
      
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: [
              // async 컴포넌트 지원을 위한 변환
              '@babel/plugin-syntax-top-level-await',
              // Server Component의 import 구문 처리
              ['@babel/plugin-transform-modules-commonjs', {
                importInterop: 'node'
              }]
            ]
          }
        }
      });
    } else {
      // 클라이언트 컴포넌트 처리
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: [
              // "use client" 지시어가 있는 파일만 클라이언트 번들에 포함
              ['./plugins/client-directive', {}],
              // Server Component의 출력을 클라이언트에서 hydrate하기 위한 변환
              ['./plugins/server-reference', {}]
            ]
          }
        }
      });
    }
    return config;
  }
}

// Server Component 렌더링 함수
async function renderServerComponent(Component, props) {
  // 문서에 언급된 것처럼 build time 또는 request time에 실행 가능
  const stream = await ReactServerDOM.renderToReadableStream(
    <Component {...props} />,
    // 클라이언트 컴포넌트의 번들 정보를 담은 매핑
    webpackMap
  );
  
  // React의 Flight 포맷으로 직렬화
  return encodeRSCPayload(stream);
}

이 구현은 공식 문서의 다음 개념들을 반영합니다:

"Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server."
- webpack 설정에서 isServer 플래그로 환경을 분리
"Server Components can run once at build time on your CI server, or they can be run for each request using a web server."
- renderServerComponent 함수가 이 두 가지 케이스를 모두 지원
"Async Components are a new feature of Server Components that allow you to await in render."
- 서버 측 babel 설정에 @babel/plugin-syntax-top-level-await 포함

핵심 구현 요소

RSC 포맷
- 서버 컴포넌트의 렌더링 결과를 특별한 포맷으로 직렬화
- JSON이 아닌 특별한 바이너리 형식 사용
- React Flight 아키텍처 활용
번들링 최적화
- 서버 전용 코드를 클라이언트 번들에서 제외
- 클라이언트 컴포넌트만 선택적으로 번들링
스트리밍 지원
- React Suspense와 통합
- 점진적인 페이지 로딩 구현

이해를 위해 기본적인 틀에 맞춰 간소화해 구현해 봤습니다!
혹시 틀린 부분이 있다면 편하게 댓글 주시면 감사하겠습니다!

Remix의 접근

Remix는 라우터 기반의 서버 중심 아키텍처를 채택하여 유사한 이점을 제공합니다.

// Remix의 서버 사이드 로직 예시
export async function loader({ request }) {
  const data = await getProducts();
  return json(data);
}

export default function Products() {
  const products = useLoaderData();
  return (
    <div>
      <h1>Products</h1>
      <ProductList products={products} />
    </div>
  );
}

4. Next.js 앱 라우터와 서버 컴포넌트의 관계

Next.js의 앱 라우터는 서버 컴포넌트를 기본값으로 채택했습니다. 매우 중요한 아키텍처적 결정이죠?!

기본 구조

// app/layout.jsx (서버 컴포넌트)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.jsx (서버 컴포넌트)
async function Home() {
  const data = await getData(); // 서버에서 직접 데이터 fetch
  
  return (
    <main>
      <h1>Welcome</h1>
      <ClientComponent data={data} />
    </main>
  );
}

// components/client-component.jsx
'use client';

function ClientComponent({ data }) {
  // 클라이언트 사이드 인터랙션이 필요한 컴포넌트
  return <div>{/* 인터랙티브 UI */}</div>;
}

주요 특징

자동 코드 분할

// app/products/page.jsx
import { ProductList } from './components/product-list';

async function ProductsPage() {
  const products = await fetchProducts(); // 서버에서만 실행
  return <ProductList products={products} />;
}

// 이 컴포넌트와 관련된 서버 로직은 클라이언트 번들에 포함되지 않음

스트리밍과 Suspense 통합

// app/dashboard/page.jsx
import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<LoadingUI />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

마치며

현재 제가 진행 중인 프로젝트에서는 React 18.2.0을 사용하고 있어 서버 컴포넌트를 직접 사용하기는 어려운 상황입니다.

하지만 고객 피드백을 받은 후 Next.js로의 마이그레이션을 고려하고 있으며, 서버 컴포넌트의 이점을 자연스럽게 활용할 수 있는 좋은 기회가 될 것 같습니다.

프로젝트가 커지며, 번들 사이즈 최적화와 서버 리소스 활용 측면에서 큰 이점을 제공할 것으로 기대됩니다!

📃 참고 문헌

React 19 RC!!!

React RFC 깃헙

Next.js App Router RFC 깃헙

Next.js Server Components 공식문서

React Core팀 Dan Abramov의 Server Components 소개 발표

카카오페이 - React Server Components

요즘 IT - React Server Components

freeCodeCamp - React Server Components

'Side-Project > Allini - 반려견 음식 관리' 카테고리의 다른 글

PostCSS와 Autoprefixer 웹팩 설정부터 문제 해결까지 (1)	2024.11.01
express-openapi-validator PR 여정기! HTTP 인증 로직 개선 하기 🚀 (11)	2024.10.27
Virtual Scroll: 어떤 상황에서 써야할까? (8)	2024.10.13
실제로 상용 라이브러리에서 버츄얼 스크롤을 어떻게 구현했을까? (0)	2024.10.13
SVG를 컴포넌트처럼 사용하기 위한 Webpack 설정 (4)	2024.10.08

Dorong Dorong 💻😴