---
id: FE-REND-STRAT-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [csr, ssr, rendering, web-architecture, seo, lcp, hydration, hybrid-rendering]
last_reinforced: 2026-04-26
---

# Web Rendering Strategies: CSR vs SSR (웹 렌더링 전략: CSR vs SSR)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "초기 로딩의 속도(SSR)와 인터랙션의 매끄러움(CSR) 사이에서 비즈니스 목적에 최적화된 지점을 선택하고, 하이브리드 접근법을 통해 검색 엔진과 사용자 모두를 만족시켜라" — 웹 애플리케이션의 성능, SEO, 사용자 경험을 결정짓는 핵심 아키텍처 선택 가이드.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Purpose-driven Rendering Allocation" — 검색 노출이 중요한 공용 페이지는 SSR로, 복잡한 상태 관리가 필요한 대시보드는 CSR로 할당하거나, 이를 혼합하여 사용하는 패턴.
- **렌더링 방식 비교:**
    - **CSR (Client-Side Rendering):** 브라우저에서 JS로 UI 구성. SPA에 적합하며 매끄러운 화면 전환 제공. 단, 초기 로드 속도가 느리고 SEO에 불리함.
    - **SSR (Server-Side Rendering):** 서버에서 완성된 HTML 전송. 초기 LCP가 빠르고 SEO에 매우 유리함. 단, 서버 부하 증가 및 수화(Hydration) 지연 가능성 존재.
    - **SSG (Static Site Generation):** 빌드 타임에 정적 파일 생성. 가장 빠른 성능 제공. 정적 마케팅 페이지에 최적.
- **핵심 지표 영향:** SSR은 LCP(최대 콘텐츠 페인팅)를 개선하는 반면, CSR은 TTI(상호작용 시작 시간) 이후의 탐색 경험을 강화함.
- **의의:** 기술적 제약을 넘어 비즈니스 수익(전환율)과 직결되는 최적의 렌더링 전략을 수립할 수 있게 함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 CSR과 SSR 중 하나를 선택하는 이분법적 논리가 지배적이었으나, 현재 정책은 Next.js 등 프레임워크를 활용해 페이지/컴포넌트 단위로 렌더링 방식을 혼합하는 '하이브리드/아일랜드 아키텍처' 정책으로 진화함.
- **정책 변화:** Antigravity 프로젝트는 모든 공용 콘텐츠에 대해 'SSR-First'를 원칙으로 하며, 인증된 영역에 한해 'CSR-Hydration' 전략을 부분적으로 허용함.

## 🔗 지식 연결 (Graph)
- [[Core-Web-Vitals|Core-Web-Vitals]], [[Nextjs-App-Router-Architecture|Nextjs-App-Router-Architecture]], Single-Page-Application-SPA, SEO-Foundations, Server-Side-Rendering-SSR
- **Raw Source:** 00_Raw/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md