2nd/00_Raw/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md

# [[Client-Side Rendering (CSR) vs Server-Side Rendering (SSR)]]

## 📌 Brief Summary
Client-Side Rendering (CSR)은 브라우저가 최소한의 HTML 뼈대와 JavaScript 번들을 다운로드한 뒤 클라이언트 측에서 동적으로 UI를 구성하는 렌더링 방식입니다 [1]. 반면 Server-Side Rendering (SSR)은 사용자의 요청 시마다 서버가 전체 HTML 페이지를 렌더링하여 브라우저로 즉시 전송하는 방식입니다 [2]. 이 두 가지 접근법은 웹사이트의 초기 로드 속도, 검색 엔진 최적화(SEO), 상호작용성 및 서버 아키텍처에 중대한 영향을 미치며, 프로젝트의 목적과 요구사항에 따라 적절한 렌더링 전략을 선택하는 것이 필수적입니다 [3].

## 📖 Core Content
*   **동작 원리와 주요 특징**
    *   **CSR**: 서버는 빈 HTML(예: `<div id="root"></div>`)을 반환하고, 실제 콘텐츠는 브라우저가 JavaScript를 다운로드하고 실행한 후에 렌더링됩니다 [1, 4]. 이 방식은 SPA(Single Page Application)나 대시보드에 적합하며, 페이지 전체를 새로고침하지 않고도 빠르고 매끄러운 화면 전환을 제공합니다 [1, 5]. 하지만 JavaScript가 로드되는 동안 사용자에게 빈 화면이나 로딩 화면이 노출되어 초기 체감 속도가 느릴 수 있습니다 [5].
    *   **SSR**: 요청이 들어올 때마다 서버가 즉시 콘텐츠가 포함된 완성된 HTML을 생성해 반환합니다 [2]. 초기 로드 시간이 빠르고 사용자에게 즉각적으로 유의미한 시각적 콘텐츠를 제공할 수 있어 마케팅 페이지나 블로그, 이커머스 사이트 등 콘텐츠 중심의 웹사이트에 이상적입니다 [2, 6]. 다만, 서버의 부하가 증가하고 아키텍처의 복잡성이 커질 수 있습니다 [7].

*   **검색 엔진 최적화 (SEO) 관점의 영향**
    *   **CSR의 한계**: 구글봇 등의 검색 엔진이 전통적인 React 앱을 크롤링할 때 초기에는 텅 빈 HTML 껍데기만을 보게 됩니다 [4]. JavaScript 실행이 지연되거나 실패하면 콘텐츠 인덱싱이 누락될 수 있으며, 렌더링을 위해 크롤링 예산을 낭비하게 됩니다 [8, 9].
    *   **SSR의 이점**: 검색 봇이 완성된 HTML과 메타데이터, 구조화된 데이터를 즉시 수신하므로, 크롤링 지연 없이 즉각적인 인덱싱이 가능합니다 [10-12]. 따라서 높은 SEO 성과가 필수적인 프로젝트에서는 SSR 채택이 필수적입니다 [6].

*   **웹 성능 및 Core Web Vitals 최적화**
    *   **LCP (Largest Contentful Paint)**: CSR 환경에서는 큰 JavaScript 번들의 다운로드와 실행, 클라이언트 측 데이터 패칭 등으로 인해 LCP가 크게 지연될 수 있습니다 [13-15]. SSR을 구현하면 렌더링 지연을 없애 LCP를 대폭 개선할 수 있습니다(사례에 따르면 약 1,000ms 개선 가능) [16-19].
    *   **수화(Hydration)와 INP**: SSR을 사용해 HTML을 빠르게 제공하더라도, 클라이언트 측 JavaScript가 HTML과 결합하여 상호작용을 활성화하는 '수화(Hydration)' 과정에서 메인 스레드가 차단될 수 있습니다 [15]. 이는 새로운 성능 지표인 INP(Interaction to Next Paint) 저하를 유발할 수 있으므로 점진적 수화(Progressive Hydration) 같은 최적화가 필요합니다 [15, 20].

*   **보안 고려사항 (Security)**
    *   **CSR 보안**: 프론트엔드에 비즈니스 로직이 노출되므로 크로스 사이트 스크립팅(XSS) 취약점에 대비해 콘텐츠 소독과 강력한 콘텐츠 보안 정책(CSP) 적용이 중요합니다 [21, 22].
    *   **SSR 보안**: 서버에서 동적으로 데이터를 처리하므로 데이터 주입(SQLi 등)이나 서버 측 요청 위조(SSRF), 민감한 내부 API 노출의 위험이 있어 모든 입출력에 대한 철저한 검증과 권한 부여가 필요합니다 [21, 23].

*   **모던 웹 아키텍처의 진화 (Hybrid Rendering)**
    *   최근의 웹 엔지니어링은 SSR과 CSR, 그리고 빌드 타임에 HTML을 생성하는 SSG(Static Site Generation)를 결합한 하이브리드 렌더링을 지향합니다 [24].
    *   Next.js나 Remix 같은 프레임워크를 활용하여, SEO가 덜 중요한 인증된 사용자 대시보드에는 CSR을, 실시간 업데이트가 필요한 페이지에는 SSR을, 정적 마케팅 페이지에는 SSG를 선택적으로 적용하는 방식이 권장됩니다 [25-27].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Single Page Application (SPA)]], [[Static Site Generation (SSG)]], [[Search Engine Optimization (SEO)]]
- **Projects/Contexts:** [[하이브리드 웹 렌더링 아키텍처 설계]], [[Next.js 및 Remix를 활용한 SEO 최적화 파이프라인 구축]]
- **Contradictions/Notes:** CSR 방식은 초기 렌더링 속도가 느리고 SEO에 치명적인 약점이 있지만 [5, 8], JavaScript 로드가 끝난 이후에는 화면 깜빡임 없이 매끄럽게 페이지 간 이동이 가능해 'Time to Interactive(TTI)' 측면에서는 높은 평가를 받습니다 [28]. 따라서 모든 상황에 SSR이 정답인 것은 아니며, 페이지별 비즈니스 목적에 맞게 렌더링 전략(Hybrid Rendering)을 혼합하여 사용하는 것이 모던 웹 아키텍처의 핵심입니다 [24, 29].

---
*Last updated: 2026-04-26*