2nd/10_Wiki/Topics/Frontend_Mastery/서버 사이드 렌더링(SSR)과 하이드레이션(Hydration).md

# [[서버 사이드 렌더링(SSR)과 하이드레이션(Hydration)|서버 사이드 렌더링(SSR)과 하이드레이션(Hydration]]

## 📌 Brief Summary
서버 사이드 렌더링(SSR)은 사용자의 요청이 있을 때마다 서버에서 데이터를 포함한 완전한 HTML을 생성하여 브라우저에 전달하는 렌더링 방식입니다. 브라우저가 전달받은 정적 HTML 화면을 즉각적으로 표시한 후, 자바스크립트를 다운로드 및 실행하여 이벤트 리스너와 상태를 연결해 애플리케이션을 상호작용 가능하게 만드는 과정을 하이드레이션(Hydration)이라고 합니다. SSR은 초기 로딩 속도(FCP)가 빠르고 검색 엔진 최적화(SEO)에 탁월하지만, 하이드레이션이 완료되기 전까지 사용자가 상호작용할 수 없는 지연 시간(TTI)이 발생한다는 트레이드오프가 존재합니다.

## 📖 Core Content
**서버 사이드 렌더링(SSR)의 동작 원리와 특징**
*   **작동 방식:** 클라이언트(브라우저)에서 요청이 발생하면 서버는 라우팅과 데이터 페칭, 렌더링 로직을 실행하여 완전한 형태의 HTML 문서를 생성한 뒤 브라우저에 보냅니다 [1-3]. 
*   **장점:** 빈 컨테이너나 로딩 화면 대신 콘텐츠가 채워진 페이지를 즉각적으로 제공하기 때문에 초기 로드 시간(First Contentful Paint, FCP)이 매우 빠릅니다 [4-6]. 또한 검색 엔진 크롤러가 자바스크립트 실행 없이도 완성된 HTML을 바로 수집할 수 있어 검색 엔진 최적화(SEO)와 소셜 미디어 공유(미리보기)에 압도적으로 유리합니다 [1, 5, 7]. 이러한 특성 덕분에 뉴스 사이트나 이커머스 제품 페이지처럼 콘텐츠가 자주 업데이트되고 SEO가 중요한 서비스에 적합합니다 [8, 9].
*   **단점:** 매 요청마다 서버에서 렌더링 연산을 수행해야 하므로 트래픽이 몰릴 때 서버 부하가 증가하며, 인프라 비용과 관리 복잡성이 커집니다 [10-12]. 서버 측 처리 시간이 필요하여 초기 응답 속도인 Time to First Byte(TTFB)가 100~300ms가량 증가할 수 있습니다 [6, 13].

**하이드레이션(Hydration)의 개념과 메커니즘**
*   **생명을 불어넣는 과정:** SSR을 통해 서버에서 전달받은 초기 HTML은 시각적으로는 완성되어 있지만, 이벤트 핸들러가 연결되지 않아 클릭 등의 조작에 반응하지 않는 정적인 상태(Static Skeleton)입니다 [12, 14, 15]. 브라우저가 자바스크립트 번들을 다운로드하고 실행하면서 React 등의 프레임워크가 가상 DOM([[Virtual DOM|Virtual DOM]])을 실제 HTML에 매핑하고 이벤트 리스너와 상태 관리를 부착하는 과정을 '하이드레이션'이라 부릅니다 [1, 15-17].
*   이 과정은 기기 성능이나 번들 크기에 따라 최신 기기에서도 대략 200~800ms가 소요됩니다 [16].

**하이드레이션의 성능 문제 및 사용자 경험 저하**
*   기본적으로 React는 화면에 즉시 보이지 않는 컴포넌트까지 포함하여 페이지 전체를 한 번에 하이드레이션합니다 [18, 19]. 이로 인해 대량의 자바스크립트 실행이 메인 스레드를 차단([[Blocking|Blocking]])하게 됩니다 [18].
*   이러한 차단 현상은 Total Blocking Time(TBT) 지표를 악화시키며, 시각적으로는 버튼이나 폼이 렌더링되어 사용자가 조작을 시도했음에도 하이드레이션이 끝날 때까지 반응하지 않는 불쾌한 경험(Uncanny Valley 현상)을 유발합니다 [12, 16, 20]. 결과적으로 상호작용이 가능해지는 시간인 Time to Interactive(TTI)가 2~5초까지 지연되기도 합니다 [6].
*   또한 서버에서 렌더링된 HTML과 클라이언트에서 렌더링하려는 결과물이 일치하지 않을 때 발생하는 '하이드레이션 불일치(Mismatch) 에러'도 흔한 문제로 꼽힙니다 [19].

**하이드레이션 최적화 및 고급 전략**
위와 같은 한계를 극복하기 위해 최신 웹 프레임워크([[Next.js|Next.js]] 등)는 다음과 같은 하이드레이션 최적화 기술을 활용합니다.
*   **선택적 및 점진적 하이드레이션 (Selective/Progressive Hydration):** 동적 임포트(Dynamic Imports)를 활용하여 상단 콘텐츠(Above-the-fold)를 우선 처리하고, 덜 중요한 부분의 하이드레이션을 뒤로 미루어 TBT를 최대 40%까지 줄입니다 [21-23].
*   **가시성 기반 지연 하이드레이션 (Lazy Hydration):** 사용자가 화면을 스크롤하여 특정 요소가 뷰포트 내에 들어올 때만 하이드레이션을 트리거하는 방식입니다 [23, 24].
*   **아일랜드 아키텍처 ([[Island Architecture|Island Architecture]]):** 페이지의 대부분을 정적 HTML로 유지하고, 상호작용이 필요한 특정 부분("섬")만 분리하여 클라이언트 기능을 부여함으로써 자바스크립트 실행 최소화를 돕습니다 [21].
*   **스트리밍 SSR 및 Suspense:** 서버에서 HTML을 청크 단위로 쪼개 브라우저에 점진적으로 스트리밍 전송하여 하이드레이션 부담을 분산시킵니다 [21, 25].
*   **React 서버 컴포넌트 (RSC):** 상호작용이 없는 컴포넌트를 서버에서만 실행되도록 격리하여, 아예 클라이언트로 자바스크립트 코드를 전송하지 않고 하이드레이션 과정 자체를 생략함으로써 압도적인 성능 개선을 이뤄냅니다 [24-26].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Client-Side Rendering (CSR)|Client-Side Rendering (CSR]]`, `Static Site Generation (SSG)`, `Time to Interactive (TTI)`, `[[React Server Components (RSC)|React Server Components (RSC]]`, `[[Total Blocking Time (TBT)|Total Blocking Time (TBT]]`
- **Projects/Contexts:** `[[Next.js를 활용한 SEO 및 성능 최적화 하이브리드 렌더링 아키텍처 설계|Next.js를 활용한 SEO 및 성능 최적화 하이브리드 렌더링 아키텍처 설계]]`, `[[콘텐츠 기반의 이커머스 및 뉴스 웹사이트 성능 튜닝|콘텐츠 기반의 이커머스 및 뉴스 웹사이트 성능 튜닝]]`
- **Contradictions/Notes:** SSR은 FCP와 LCP 지표를 개선해 시각적 속도를 극대화하지만, 그에 대한 대가로 JS 번들이 처리되는 하이드레이션 기간 동안 사용자의 입력(TTI, FID 지표)이 지연된다는 본질적인 트레이드오프를 가지고 있습니다. 따라서 완벽한 해결책이라기보다는 서비스 목적(SEO 최우선 vs. 즉각적 상호작용 최우선)에 맞춰 CSR 등과 결합(하이브리드)하는 방식이 권장됩니다 [6, 27, 28].

---
*Last updated: 2026-04-25*