SSR이란 무엇인가

• Server-Side Rendering, 서버 사이드 렌더링

• 웹 애플리케이션에서 서버에서 HTML을 렌더링하여 클라이언트에게 전달하는 기술

• 전통적인 CSR과 비교해보면, SSR은 브라우저가 초기 로드 시, 완전한 HTML 페이지를 받을 수 있도록 해 성능 및 SEO(검색 엔진 최적화) 면에서 이점을 제공

SSR 동작 원리

1. 사용자 요청: 사용자가 웹 브라우저에서 특정 URL을 요청

2. 서버 처리: 서버는 해당 요청을 처리해 필요한 데이터를 가져오고, HTML 페이지를 생성

3. HTML 전달: 생성된 HTML 페이지가 클라이언트(브라우저)로 전달됨

4. 클라이언트 렌더링: 브라우저는 전달받은 HTML을 렌더링하고, 이후 Javascript가 활성화되어 페이지와 상호 작용이 가능해짐

SSR 장점과 단점

• 장점

  1. 빠른 초기 로드

     • 초기 페이지 로드 시, 브라우저가 완전한 HTML을 받아, 렌더링 속도가 빠름

  2. SEO 친화적

     • 검색 엔진이 완전한 HTML 페이지를 크롤링할 수 있어 유리

  3. 저사양 디바이스 지원

     • 클라이언트에서 처리할 로직이 줄어들어, 저사양 기기에서도 더 나은 성능 제공

• 단점

  1. 서버 부하 증가

     • 서버에서 모든 렌더링 작업 수행 (요청이 많아질수록 서버 부하 증가 가능)

  2. 복잡한 설정

     • 설정 및 구현이 CSR보다 복잡할 수 있음

  3. 페이지 전환 속도

     • 각 요청마다 서버로부터 새로운 HTML을 받아와야 함 (페이지 전환 속도가 느릴 수 있음)

ISR?

• Incremental Static Regeneration (Next.js에서 제공하는 렌더링 방식)

• 정적 생성(Static Generation)과 동적 콘텐츠 업데이트의 장점을 결합한 기능

• 특정 페이지를 빌드 시, 정적으로 생성하지만 이후에 백그라운드에서 재생성을 통해 콘텐츠 업데이트 가능

ISR 활용 사례

• 블로그 게시글

  • 블로그 게시글은 내용이 자주 변경되지 않지만, 업데이트가 필요할 수 있음

• eCommerce 제품 페이지

  • 제품 정보가 자주 변경될 수 있음

ISR vs SSG vs SSR

• ISR은 SSG의 성능과 SSR의 유연성을 결합 & 빠른 페이지 로드와 실시간 데이터 업데이트를 동시에 제공 가능

HydrateRoot

사용하는 부분

1. 서버 사이드 렌더링: 서버에서 HTML을 렌더링하여 브라우저에 전달하고, 클라이언트에서 React 애플리케이션으로 동작을 이어갈 때 사용됨

2. React의 동적 기능 활성화: 서버에서 생성된 HTML에는 React 상태 관리, 이벤트 핸들러가 포함되지 않음

• 클라이언트에서 이를 활성화하려면, hydrateRoot가 필요함

3. 클라이언트에서 추가적인 렌더링 방지: hydrateRoot는 서버에서 생성된 HTML과 클라이언트의 React 트리를 비교하며, 재렌더링을 최소화 (초기 로딩 성능을 개선 가능)

4. React 18의 새로운 동시성 기능 활용: React의 Concurrent Mode를 지원 (동시성 활용해 UI 업데이트를 더 효율적으로 처리 가능)

사용 시 주의 사항

1. 서버에서 제공된 HTML과 클라이언트 React 상태 일치: 서버에서 렌더링된 HTML과 클라이언트에서 초기화된 React 상태가 다르면, React는 이를 경고하고 DOM을 수정

• 방지하려면, 서버와 클라이언트 모두 동일한 데이터를 사용해야 함

2. Strict Mode 사용하기

import { hydrateRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
hydrateRoot(
  container,
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

3. 동적 데이터: 서버에서 렌더링된 데이터가 시간이 지나면서 변경될 경우, 클라이언트와 동기화하는 추가 로직이 필요

• Next.js에서는 기본적으로 hydrateRoot가 내부적으로 사용됨

SSR를 직접 구현할 필요가 있을까?