렌더링 패턴 ( Streaming SSR + RSC )

Streaming SSR

• Next.js에서 사용하는 렌더링 전략으로, 기존의 서버 사이드 렌더링(SSR) 방식에서 한 단계 더 진화된 렌더링 기법입니다.
• 데이터를 모두 준비한 후 전체 HTML을 한 번에 클라이언트로 전송하는 것이 아니라, 부분적으로 HTML을 생성하고 준비된 부분부터 바로 클라이언트에 전송하는 렌더링 방식 입니다.
  • HTML을 조각 단위로 나눠 데이터가 준비된 순서대로 점진적으로 스트리밍 렌더링합니다.
  • 덕분에, 기존의 SSR 방식보다 초기 로딩 속도를 개선하고, UX를 향상시킬 수 있습니다.
• Next.js는 React 18의 streaming 기능을 바탕으로 Streaming SSR을 지원합니다.
  • React 18의 ReactDOMServer.renderToPipeableStream과 Suspense와 Lazy loading 조합으로 지원됩니다.
    • ReactDOMServer.renderToPipeableStream 은 React 18에서 추가된 API로, 서버에서 React 렌더링을 스트림 형태로 브라우저에 보낼 수 있습니다.
    • Suspense 는 비동기 컴포넌트 렌더링을 관리하기 위한 메커니즘으로, 내부적으로 throw promise 패턴을 사용하여 lazy loading 을 지원해주는 컴포넌트 입니다. 
  • 클라이언트 컴포넌트는 스트리밍 대상이 아닙니다.
  • Suspense를 제대로 활용하지 않으면 streaming 렌더링이 실행되지 않습니다.

// app/posts/page.tsx
import { Suspense } from 'react';
import Posts from './Posts';

export default function Page() {
  return (
    <div>
      <h1>All Posts</h1>
      <Suspense fallback={<p>Loading posts...</p>}>
        <Posts />
      </Suspense>
    </div>
  );
}

 

Streaming SSR 동작 과정

1. 사용자가 브라우저에서 페이지를 요청하면, 서버는 해당 URL에 대한 React 앱을 렌더링하기 시작합니다.

2. React는 서버에서 renderToPipeableStream() (또는 renderToReadableStream() for edge) 함수를 이용해 컴포넌트를 렌더링합니다. 이 렌더링은 스트림 형태로 진행되어, 컴포넌트 트리를 전부 기다리지 않고 바로바로 데이터를 보낼 수 있게 합니다.

3. 페이지의 공통 레이아웃를 먼저 클라이언트로 보냅니다. 이를 통해 브라우저가 빠르게 렌더링을 시작하고 사용자에게 빠른 응답감을 줍니다.

4. React는 준비된 컴포넌트부터 차례차례 HTML로 렌더링해서 클라이언트로 전송합니다. Suspense로 비동기 데이터를 감싸면, 준비된 것부터 먼저 보내고 나중에 준비되는 부분은 fallback을 보여줍니다.

5. 브라우저는 받은 HTML을 바로 렌더링하면서, 자바스크립트를 다운로드하여 하이드레이션(hydration)합니다.

 

장점

• 서버에서 HTML을 스트리밍하기 때문에, 전체 페이지를 다 렌더링하지 않아도 일부를 먼저 클라이언트로 전송할 수 있습니다. 따라서, 빠른 초기 로딩 속도를 가집니다.
• 필요한 부분만 스트리밍하고, JS 번들도 코드 스플리팅을 통해 나중에 로드할 수 있습니다.
• 일부 컴포넌트만 실패하거나 느리더라도, 전체 페이지가 중단되지 않고 부분적으로 실행이 가능합니다.
• HTML을 SSR로 생성해서 스트리밍하므로, 검색 엔진은 자바스크립트 실행 없이도 중요한 콘텐츠를 빠르게 수집 가능하여 SEO 최적화에 유리합니다.

단점

• Suspense, streaming boundary, fallback UI 구성 등 신경 쓸 게 많아 구현 복잡도가 높습니다.
• 서버가 스트림을 계속 유지해야 하기 때문에 많은 사용자가 동시에 접근할 경우, 서버 부하에 유의해야 합니다.
• 스트리밍 방식은 클라이언트가 HTML을 단계적으로 받아야 하므로, CDN이나 캐싱 계층에서 정상 작동하지 않을 수 있습니다.

RSC ( React Server Component )

• React 컴포넌트를 서버에서 React 트리 구조로 렌더링 하여 클라이언트로 전송하는 서버 전용 컴포넌트 입니다.
• 클라이언트에 API 키, 민감한 정보 노출을 방지합니다.
• 서버 자원을 활용한 성능 향상시킬 수 있습니다.
• 서버에서 실행되는 컴포넌트는 클라이언트로 가지 않기 때문에 불필요한 JS 제거하여 JS 번들 사이즈를 감소시킵니다.

Web Vitals

Lighthouse / Web Vitals

Streaming SSR 과 Web Vitals

• 첫 번째 HTML 조각을 서버에서 바로 전송하기 때문에 브라우저는 빠르게 DOM을 만들고 텍스트나 기본 UI 요소를 빠르게 표시할 수 있습니다. 따라서, FCP가 빠르게 측정되고, LCP는 진짜 콘텐츠가 보여질 때까지 지연됩니다.
  • FCP ( First Contentful Paint ) : 브라우저에 최초로 콘텐츠를 화면에 렌더링한 시점
  • LCP ( Largest Contentful Paint ) : 가장 큰 콘텐츠 요소(주로 이미지, 텍스트 블록 등)가 화면에 표시되는 시점