SSR vs Streaming SSR

Streaming SSR이란?

Streamming SSR은 서버에서 랜더링된 HTML을 한 번에 모두 보내는 대신, 준비 된 부분부터 순차적으로 클라이언트에 전송하는 기술이다. 이를 통해 사용자는 페이지의 일부 콘텐츠를 더 빠르게 볼 수 있어 전체적인 사용자 경험이 향상된다.

 

SSR의 동작 과정

A. Server(API)에서 Server(NextJS)로 데이터를 가져온다.
B. Server(NextJS)는 Server(API)에서 가져온 데이터로 프리랜더링 결과물을 만든다.
C. Client(Browser)는 Server(NextJS)로부터 프리랜더링 결과물을 받는다.
D. Client(Browser)는 Server(NextJS)로부터 CSS와 Javascript 파일을 받는다.
E. Cient(Browser)는 Hydration 과정을 통해 웹 페이지가 유저와 상호작용 할 수 있게 만든다. 

 

SSR의 단점

사용자에게 페이지를 표시하기 위해서는 모든 데이터를 불러와야 하며, 이는 Hydration이 시작하기 전 모든 HTML과 Javascript를 로드해야 한다는 이야기다. Hydration은 한번에 이루어지기 떄문에, Hydration 과정이 끝나기 전까지 모든 페이지 구성요소들은 유저와 상호 작용할 수 없다.

 

Streaming SSR의 동작 과정

A. Server(API)에서 Server(NextJS)로 데이터를 가져온다.
B. 데이터를 가져오는 도중, Server(NextJS)는 데이터가 필요없는 요소들로 먼저 프리랜더링 결과물을 만든다.
C. Client(Browser)는 Server(NextJS)로부터 프리랜더링 결과물을 받는다.
D. Client(Browser)는 Server(NextJS)로부터 CSS와 Javascript 파일을 받는다.
E. Cient(Browser)는 Hydration 과정을 통해 웹 페이지가 유저와 상호작용 할 수 있게 만든다.
F. 데이터 전달이 끝나 프래린더링이 될 준비가 된 요소가 생긴다면 B ~ E의 과정을 진행한다.

 

Streaming SSR의 장점

기존의 워터폴 방식의 랜더링문제를 해결하여 초기 페이지 로드 시간을 감소시킨다. 그리고 선택적 Hydration을 통해 사용자 상호작용이 필요한 부분에 우선순위를 두어 초기 상호작용성을 개선할 수 있다.

 

Streaming SSR 예시 코드

// app/DataComponent.jsx
export default async function DataComponent() {
  const data = await fetch('https://api.example.com/slow-data').then(res => res.json());

  return (
    <div>
      <h2>데이터가 필요한 컴포넌트</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// app/ClientComponent.jsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

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

export default function Page() {
  return (
    <div>
      <h1>메인 페이지</h1>
      <Suspense fallback={<div>로딩 중...</div>}>
        <DataComponent/>
      </Suspense>
      <ClientComponent />
    </div>
  );
}