본문으로 건너뛰기

렌더링 전략의 진화:CSR, SSR, SSG와 Hydration의 심층 분석

웹 애플리케이션 개발에서 렌더링 전략의 선택은 사용자 경험과 성능에 직접적인 영향을 미치는 중요한 결정이다.

CSR(Client Side Rendering)​

클라이언트 사이드 렌더링(CSR)은 서버가 최소한의 HTML 문서를 제공하고, 실제 컨텐츠는 브라우저에서 JavaScript를 통해 생성하는 방식이다. 브라우저는 먼저 서버로부터 비어있는 HTML 뼈대를 받고, JavaScript 번들을 다운로드한 후 실행하여 DOM을 구성한다.

작동 방식​

  1. 사용자가 웹사이트를 방문하면 서버는 기본적인 HTML 파일을 전송
  2. 브라우저는 HTML을 파싱하고 링크된 JavaScript 파일을 다운로드
  3. JavaScript가 실행되면서 DOM을 조작하고 페이지 컨텐츠를 동적으로 생성
  4. 모든 JavaScript가 로드되고 실행된 후에야 사용자는 완전히 상호작용 가능한 페이지를 보게 됨

장점​

  • 개발 경험이 우수함, 프론트엔드와 백엔드를 명확히 분리할 수 있어 개발 흐름이 단순화됨
  • 초기 페이지 로드 후 페이지 전환이 매우 빠름, 이미 다운로드된 JavaScript를 사용하여 새 컨텐츠만 동적으로 로드하기 때문
  • 서버 부하 감소, 렌더링 작업이 클라이언트로 옮겨지므로 서버 자원을 절약할 수 있음

단점​

  • 초기 로딩 시간이 길어짐, 상호작용 가능한 페이지를 보기 전에 JavaScript를 로드하고 실행해야 하기 때문
  • SEO에 불리함, 대부분의 검색 엔진 크롤러는 JavaScript 실행 후 컨텐츠를 볼 수 있지만, 초기 HTML에 컨텐츠가 없어 SEO에 불리
  • 첫 의미 있는 페인트(First Meaningful Paint)와 상호작용 가능 시간(Time To Interactive)이 지연됨, 특히 느린 네트워크 환경이나 저사양 기기에서 사용자 경험이 저하될 수 있음

SSR(Server Side Rendering)​

서버 사이드 렌더링(SSR)은 서버에서 페이지의 HTML을 완전히 생성한 후 클라이언트에 전송하는 방식이다. 사용자는 JavaScript가 로드되기 전에도 컨텐츠를 볼 수 있다.

작동 방식​

  1. 사용자가 페이지를 요청하면 서버는 필요한 데이터를 가져오고 완전한 HTML을 생성
  2. 브라우저는 이 HTML을 즉시 렌더링하여 사용자에게 컨텐츠를 보여줌
  3. JavaScript 파일이 다운로드되고 실행되면, 페이지는 하이드레이션(Hydration) 과정을 거쳐 정적 HTML에 이벤트 리스너와 상태를 연결
  4. 하이드레이션이 완료되면 페이지는 완전히 상호작용 가능한 상태가 됨

장점​

  • 초기 컨텐츠 표시 시간(First Contentful Paint)이 빠름, 사용자는 JavaScript 로딩 전에도 컨텐츠를 볼 수 있음
  • SEO에 유리함, 검색 엔진 크롤러는 JavaScript 실행 없이도 완전한 HTML 컨텐츠를 분석할 수 있음
  • 초기 페이지 로드 성능이 향상됨, 특히 네트워크 속도가 느리거나 저사양 기기에서도 컨텐츠가 빠르게 표시됨

단점​

  • 서버 부하 증가, 모든 요청마다 서버에서 렌더링을 수행해야 하기 때문
  • 개발 복잡성 증가, 서버와 클라이언트 양쪽 환경을 고려한 코드 작성이 필요함
  • 하이드레이션 비용이 큼, JavaScript가 로드된 후 이미 렌더링된 HTML에 이벤트 리스너를 연결하는 과정에서 성능 병목이 발생할 수 있음. 특히 복잡한 인터페이스의 경우 이 과정이 사용자 경험에 영향을 줄 수 있음

SSG(Static Site Generation)​

정적 사이트 생성(SSG)은 빌드 시점에 모든 페이지의 HTML을 미리 생성하는 방식이다. 각 요청마다 렌더링하는 대신, 빌드 과정에서 모든 가능한 페이지를 정적 HTML 파일로 생성하여 CDN 등에 배포한다.

작동 방식​

  1. 애플리케이션 빌드 시점에 필요한 모든 데이터를 가져와 HTML 페이지를 생성
  2. 생성된 정적 HTML 파일은 CDN이나 정적 호스팅 서비스에 배포
  3. 사용자가 페이지를 요청하면 미리 생성된 HTML을 즉시 제공
  4. CSR과 마찬가지로 JavaScript가 로드되면 하이드레이션 과정을 통해 페이지가 상호작용 가능한 상태가 됨

장점​

  • 초기 로딩 속도가 매우 빠름, 서버 렌더링이나 데이터 페칭 없이 미리 생성된 HTML을 즉시 제공
  • 서버 부하 없음, 빌드 시점 이후에는 정적 파일만 제공하므로 서버 연산이 필요하지 않음
  • 보안성 향상됨, 서버 측 로직에 노출되는 부분이 적어 공격 표면이 감소함
  • 호스팅 비용이 저렴함, 정적 파일 호스팅은 일반적으로 동적 서버보다 비용이 적게 듦

단점​

  • 데이터가 자주 변경되는 컨텐츠에는 적합하지 않음, 컨텐츠 업데이트마다 재빌드와 재배포가 필요
  • 사용자별 맞춤 컨텐츠 제공이 제한적, 모든 사용자에게 동일한 정적 컨텐츠가 제공됨
  • 빌드 시간 길어짐, 페이지 수가 많을 경우 빌드 과정이 오래 걸릴 수 있어 배포 파이프라인에 부담이 될 수 있음

렌더링 전략 비교 시각화​

Hydration​

하이드레이션(Hydration)은 서버에서 렌더링된 HTML 또는 빌드 타임에 생성된 정적 HTML에 클라이언트 측 JavaScript를 주입하는 과정이다. 이 과정은 서버에서 생성된 정적 HTML을 완전히 상호작용 가능한 애플리케이션으로 변환한다.

작동 원리​

하이드레이션 과정은 다음과 같은 단계로 진행된다.

  1. 서버는 초기 HTML을 생성하여 클라이언트에 전송
  2. 브라우저는 이 HTML을 파싱하고 DOM을 구성한다.
  3. JavaScript 코드가 로드되고 실행됨
  4. JavaScript 프레임워크(React, Vue 등)는 이미 존재하는 DOM 구조를 인식하고, 가상 DOM을 이 구조와 일치시킴
  5. DOM 노드에 이벤트 리스너를 연결하고 상태 관리를 시작함

이 과정을 통해 정적 HTML 문서가 동적 웹 애플리케이션으로 변환된다.

하이드레이션 과정 시각화​

하이드레이션의 도전 과제​

하이드레이션 과정은 여러 도전 과제를 제시한다.

  1. 성능 비용
    복잡한 페이지의 경우, 하이드레이션은 상당한 JavaScript 실행 시간을 요구할 수 있다. 이는 TTI(Time To Interactive)를 지연시키며, 이 기간 동안 사용자는 페이지를 볼 수 있지만 상호작용할 수 없는 "언캐니 밸리(Uncanny Valley)" 상태를 경험할 수 있다.

  2. 일관성 요구
    서버에서 렌더링된 HTML과 클라이언트의 가상 DOM이 일치해야 한다. 불일치가 발생하면 하이드레이션 오류로 이어질 수 있다. 이는 특히 서버와 클라이언트에서 다른 데이터나 환경에 접근할 때 문제가 될 수 있다.

  3. 번들 크기 영향
    하이드레이션에는 전체 JavaScript 프레임워크와 애플리케이션 코드가 필요하다. 이로 인해 초기 페이지 로딩 시간이 증가할 수 있다.

하이드레이션의 진화​

웹 프레임워크들은 하이드레이션의 효율성을 높이기 위해 다양한 접근법을 개발해왔다.

  1. 부분 하이드레이션(Partial Hydration)
    페이지의 일부만 하이드레이션하는 방식이다. 예를 들어, 화면에 보이는 컴포넌트나 상호작용이 필요한 컴포넌트만 우선적으로 하이드레이션한다. 이는 초기 인터렉티브 시간을 크게 향상시킬 수 있다.

  2. 점진적 하이드레이션(Progressive Hydration)
    중요도에 따라 컴포넌트를 순차적으로 하이드레이션한다. 이 방식은 사용자가 가장 중요한 UI 요소와 먼저 상호작용 할 수 있게 해준다.

  3. 스트리밍 SSR(Streaming SSR)
    HTML을 청크(chunk) 단위로 스트리밍하여 전체 페이지가 준비되기 전에 브라우저가 렌더링을 시작할 수 있게 한다. React 18의 Suspense와 함께 사용될 때 특히 효과적이다.

  4. 아일랜드 아키텍처(Islands Architecture)
    페이지를 정적 HTML '바다'위의 동적 '아일랜드'로 구성한다. 각 아일랜드는 독립적으로 하이드레이션된다. Astro 프레임워크가 이 접근법을 채택했다.

  5. 리액트 서버 컴포넌트(React Server Components)
    클라이언트 측 하이드레이션 없이 서버에서만 실행되는 컴포넌트를 도입하여 번들 크기를 줄이고 성능을 향상시킨다. 이는 하이드레이션 패러다임에서 벗어나 새로운 접근법을 제시한다.

렌더링 전략 선택 기준​

적절한 렌더링 전략을 선택하기 위해서는 다음과 같은 요소들을 고려해야 한다.

성능 지표​

기준CSRSSRSSG
초기 로딩속도느림빠름매우 빠름
Time to First Contentful Paint느림빠름매우 빠름
Time to Interactive중간중간-느림(하이드레이션 필요)중간-느림(하이드레이션 필요)
후속 탐색 속도빠름중간빠름

프로젝트 요구사항​

기준CSRSSRSSG
SEO 요구사항낮음높음매우 높음
콘텐츠 실시간성높음중간낮음
사용자별 맞춤화높음높음제한적
서버 부하낮음높음매우 낮음(빌드 시에만)
개발 복잡성낮음높음중간

애플리케이션 유형별 적합한 렌더링 전략​

CSR이 적합한 경우​

  • 대시보드, 관리자 패널 등 SEO가 중요하지 않은 애플리케이션
  • 사용자 인증 후 접근하는 비공개 컨텐츠
  • 실시간 데이터 시각화나 복잡한 상호작용이 필요한 웹 애플리케이션
  • 단일 페이지 애플리케이션(SPA)으로 개발된 웹앱

SSR이 적합한 경우​

  • 자주 업데이트되는 컨텐츠가 있는 동적 웹사이트
  • SEO가 중요하고 사용자별 맞춤화도 필요한 경우
  • 소셜 미디어 플랫폼, 뉴스 사이트, 이커머스 등 데이터 기반 웹사이트

SSG가 적합한 경우​

  • 블로그, 문서 사이트, 마케팅 웹사이트 등 자주 변경되지 않는 컨텐츠
  • 최고의 성능과 SEO가 필요한 경우
  • 개인 포트폴리오, 회사 소개 웹사이트 등 정적 컨텐츠 중심의 사이트

성능 측정 및 최적화​

핵심 웹 성능 지표​

  • FCP(First Contentful Paint): 페이지 컨텐츠의 첫 부분이 표시되는 데 걸리는 시간
  • LCP(Largest Contentful Paint): 가장 큰 컨텐츠 요소가 표시되는 데 걸리는 시간
  • TTI(Time To Interactive): 페이지가 완전히 상호작용 가능해지는 데 걸리는 시간
  • TBT(Total Blocking Time): FCP와 TTI 사이의 메인 스레드 차단 시간

렌더딩 전략별 최적화 기법​

CSR 최적화​

  • 코드 분할을 통한 번들 크기 감소
  • 지연 로딩 구현
  • 렌더링 차단 리소스 최소화

SSR 최적화​

  • 서버 캐싱 전략 구현
  • 스트리밍 응답 활용
  • 하이드레이션 비용 최소화를 위한 컴포넌트 최적화
  • 서버와 클라이언트 간 상태 전달 최적화

SSG 최적화​

  • 증분 빌드를 통한 빌드 시간 단축
  • CDN 캐싱 전략 구현
  • 선택적 클라이언트 사이드 하이드레이션
  • 사전 렌더링할 페이지 범위 최적화

하이드레이션 최적화​

효율적인 하이드레이션을 위한 몇 가지 중요한 전략이 존재한다. 컴포넌트를 작게 유지하고, 불필요한 리렌더링을 방지하며, 메모이제이션을 적절히 활용하는 것이 중요하다. 또한 다음과 같은 기법들이 도움이 된다.

  • 쓰로틀링(Throttling)
    우선순위가 낮은 컴포넌트의 하이드레이션을 지연시켜 초기 상호작용성을 향상시킴

  • 사전 하이드레이션(Pre-hydration)
    특정 이벤트(ex. mousehover)가 발생하기 전에 관련 컴포넌트를 하이드레이션

  • 레이지 하이드레이션(Lazy Hydration)
    화면에 보이는 컴포넌트나 사용자 상호작용이 필요한 컴포넌트만 선택적으로 하이드레이션

결론​

웹 애플리케이션에 대한 최적의 렌더링 전략을 선택하는 것은 다양한 요소를 고려한 신중한 결정이 필요하다. 대부분의 현대적인 웹사이트는 단일 접근법이 아닌 하이브리드 전략을 취하는 경향이 있다.

렌더링 전략을 선택할 때 고려해야할 핵심 질문들은 다음과 같다.

  1. SEO가 중요한가? → SSG, SSR
  2. 컨텐츠가 얼마나 자주 변경되는가? 자주 변경됨 → SSR, 덜 자주 변경됨 → SSG
  3. 사용자 경험과 복잡한 상호작용이 중요한가? → CSR
  4. 초기 로딩 속도가 중요한가? → SSG, SSR
  5. 개발팀 내부 인력의 익숙함과 기술 스택은 어떠한가? 개발 효율성 고려

궁극적으로 완벽한 렌더링 전략은 존재하지 않는다. 대신, 각 프로젝트의 고유한 요구사항과 제약 조건에 맞는 최적의 접근법을 찾는 것이 중요하다. 현대의 웹 프레임워크들은 점점 더 유연해지고 있으며, 다양한 렌더링 전략을 혼합하여 사용할 수 있는 기능을 제공하고 있다.

하이드레이션의 도전 과제를 인식하고 이를 최소화하기 위한 최신 기술들을 이해하는 것은 현대 웹 개발자에게 필수적이다. 웹 성능 최적화는 단순히 초기 로딩 속도만이 아닌, TTI, 사용자 경험, 접근성 등 다양한 측면을 고려한 종합적인 접근이 필요하다.

참고​