클라이언트 번들 크기를 0KB로 최적화하는 React Server Components(RSC)와 스트리밍 SSR 아키텍처

1. 전통적 SSR(Server-Side Rendering)의 폭포수 병목과 하이드레이션 한계

웹 프론트엔드 환경에서 검색 엔진 최적화(SEO)와 빠른 초기 화면 표시(FCP)를 위해 도입된 전통적인 서버 사이드 렌더링(SSR, Pages Router 등)은 전부 아니면 전무(All-or-Nothing)라는 구조적 한계를 안고 있습니다. 서버가 데이터베이스 조회를 완료하고 전체 HTML을 조립하기 전까지 브라우저는 단 1바이트의 마크업도 수신하지 못하며, 브라우저에 HTML이 도달하더라도 전체 자바스크립트 번들이 다운로드되어 하이드레이션(Hydration) 과정을 완주하기 전까지는 버튼 클릭 등 인터랙션이 불가능한 TBT(Total Blocking Time) 지연이 발생합니다.

또한 기존 SSR 환경에서는 서버에서 렌더링에 사용된 모든 외부 라이브러리(Markdown 파서, 날짜 처리 라이브러리, 데이터 검증기 등)의 코드 본문이 고스란히 클라이언트 번들에 포함되어 브라우저로 전송되는 번들 크기 팽창(Bundle Bloat) 문제가 지속되었습니다.

2. React Server Components(RSC)의 아키텍처 혁신: 0KB 번들 원칙

React 공식 Server Components RFC에 명시된 바와 같이, RSC(React Server Components)는 컴포넌트의 실행 위치를 서버와 클라이언트로 분리하는 패러다임 전환을 이뤄냈습니다.

RSC의 핵심 아키텍처 원리는 다음과 같습니다.

• Zero-Bundle-Size 원칙: 서버 컴포넌트는 오직 서버 런타임(Node.js, Edge Runtime)에서만 실행되며, 해당 컴포넌트가 임포트한 대규모 모듈과 로직은 클라이언트 자바스크립트 번들로 단 1바이트도 전송되지 않습니다.
• 직접 백엔드 자원 접근: API 엔드포인트를 경유하지 않고 컴포넌트 본문 내부에서 데이터베이스 SQL 질의, 파일 시스템 접근, 내부 마이크로서비스 RPC 통신을 직접 비동기(async/await)로 수행합니다.
• 직렬화 경계(Serialization Boundary): 사용자 입력이나 브라우저 이벤트(onClick, useState, useEffect)가 필요한 경우에만 use client 지시어를 선언하여 클라이언트 컴포넌트로 분리하며, 서버와 클라이언트의 경계는 직렬화 가능한 props로만 연결됩니다.

3. Flight 직렬화 프로토콜과 점진적 스트리밍(Progressive Streaming)

Next.js App Router 렌더링 공식 문서에 따르면, RSC는 서버에서 단순한 HTML 문자열을 반환하는 것이 아니라 Flight 프로토콜이라 불리는 특수 JSON 스트림 포맷을 생성합니다.

• 컴포넌트 트리 직렬화(Flight Data): 서버는 렌더링된 가상 DOM 구조, 클라이언트 컴포넌트 모듈 ID, 그리고 서버에서 계산된 props 값을 컴팩트한 텍스트 스트림(J0:, M1: 포맷)으로 인코딩합니다.
• HTTP 청크 스트리밍(Chunked Transfer-Encoding): Transfer-Encoding: chunked를 통해 무거운 데이터 조회를 기다리지 않고 준비된 상위 레이아웃을 즉각 스트리밍합니다. 브라우저는 수신된 스트림을 실시간으로 파싱하여 화면을 점진적으로 렌더링합니다.
• 선택적 하이드레이션(Selective Hydration): 점진적 하이드레이션 가이드에 명시된 바와 같이, <Suspense> 경계로 감싸진 클라이언트 컴포넌트는 해당 데이터 청크가 브라우저에 도달하는 즉시 독립적으로 하이드레이션되므로 메인 스레드 락을 원천 차단합니다.

4. 실전 아키텍처 구현: Flight 스트림 인코더 및 경계 분리 시뮬레이터

다음은 서버 컴포넌트의 가상 DOM 노드를 파싱하여 클라이언트 모듈 참조와 props를 Flight 직렬화 스트림으로 변환하고 점진적으로 방출하는 표준 엔진 구현체입니다.

// React Server Components(RSC) Flight 직렬화 프로토콜 및 청크 스트리밍 시뮬레이터
// 1. 서버 전용 비동기 컴포넌트 (DB 직접 조회, 0KB 클라이언트 번들)
async function ProductDetailsServerComponent({ productId }) {
    // 서버 환경에서 직접 DB 또는 백엔드 마이크로서비스 호출
    const product = await fetchProductFromDatabase(productId);
    const heavyMarkdownHtml = renderHeavyMarkdownServerOnly(product.description);

    return {
        type: 'div',
        props: {
            className: 'product-card',
            children: [
                { type: 'h1', props: { children: product.title } },
                { type: 'div', props: { dangerouslySetInnerHTML: { __html: heavyMarkdownHtml } } },
                // 클라이언트 인터랙션 컴포넌트 경계(Client Boundary)
                {
                    $$typeof: Symbol.for('react.client.reference'),
                    id: 'client-chunk-cart-button.js',
                    name: 'AddToCartButton',
                    props: { productId: product.id, price: product.price }
                }
            ]
        }
    };
}

// 2. Flight 직렬화 프로토콜 스트리밍 인코더
class FlightDataStreamEncoder {
    constructor() {
        this.chunkId = 0;
    }

    encodeServerTree(node) {
        const streamLines = [];
        // 클라이언트 모듈 참조 선언부 직렬화
        streamLines.push('M1:{'id':'client-chunk-cart-button.js','name':'AddToCartButton','chunks':['cart.chunk.js']}');

        // 가상 DOM 트리의 Flight JSON 포맷 인코딩 (HTML이 아닌 구조적 메타데이터 스트림)
        const flightJson = JSON.stringify(node, (key, value) => {
            if (value && value.$$typeof === Symbol.for('react.client.reference')) {
                return {
                    $type: 'client_reference',
                    ref: 'M1',
                    props: value.props
                };
            }
            return value;
        });

        streamLines.push(`J0:${flightJson}`);
        return streamLines.join('\n');
    }
}

// 3. 점진적 청크 스트리밍 모의 실행
async function simulateStreamingResponse(responseWriter) {
    const encoder = new FlightDataStreamEncoder();
    responseWriter.setHeader('Content-Type', 'text/x-component');
    responseWriter.setHeader('Transfer-Encoding', 'chunked');

    // 1단계: 정적 셸 및 즉시 가용한 서버 컴포넌트 스트리밍
    const partialTree = await ProductDetailsServerComponent({ productId: 'prod_9901' });
    const flightChunk = encoder.encodeServerTree(partialTree);
    responseWriter.write(flightChunk);

    // 2단계: Suspense 경계로 감싸진 지연 데이터 청크 도착 시 후속 스트림 전송
    console.log('[RSC Engine] 1차 Flight 스트림 전송 완료 (클라이언트 즉시 렌더링 착수)');
}

5. 성능 실측 벤치마크 및 프로덕션 App Router 마이그레이션 가이드

대규모 이커머스 상세 페이지를 대상으로 Pages Router(전통 SSR)와 App Router(RSC + 스트리밍) 환경에서 실측한 Core Web Vitals 성능 비교 지표는 다음과 같습니다.

프로덕션 환경에서 RSC 아키텍처를 도입할 때는 다음 원칙을 반드시 준수해야 합니다.

• 클라이언트 경계 최소화(Leaf-level Client Components): use client 선언을 컴포넌트 트리 상단에 두지 않고, 실제 사용자 이벤트(버튼 클릭, 폼 입력)를 처리하는 말단(Leaf) 컴포넌트로 국한시켜 서버 컴포넌트의 0KB 번들 혜택을 극대화해야 합니다.
• Props 직렬화 가능성 보장: 서버 컴포넌트에서 클라이언트 컴포넌트로 함수(콜백), 클래스 인스턴스, Symbol 등을 직접 전달할 수 없으므로, 모든 props는 순수 JSON 직렬화가 가능한 원시 타입이나 객체로 구성해야 합니다.
• Suspense 경계의 세분화: 지연시간이 긴 데이터베이스 쿼리는 반드시 독립적인 <Suspense fallback=...>로 감싸서, 특정 컴포넌트의 지연이 전체 페이지 레이아웃 스트리밍을 차단하지 않도록 설계해야 합니다.