id: FE-REND-STRAT-001 category: Unified 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)

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

추출된 패턴: "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(상호작용 시작 시간) 이후의 탐색 경험을 강화함.
의의: 기술적 제약을 넘어 비즈니스 수익(전환율)과 직결되는 최적의 렌더링 전략을 수립할 수 있게 함.

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

Core-Web-Vitals, 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