2nd/10_Wiki/Topics/AI_and_ML/CSR vs SSR vs SSG.md

CSR vs SSR vs SSG

📌 Brief Summary

CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링), SSG(정적 사이트 생성)는 웹 애플리케이션의 HTML 콘텐츠가 언제, 어디서 생성되어 사용자에게 전달되는지를 결정하는 핵심적인 웹 렌더링 전략입니다 [1-3]. CSR은 브라우저에서 JavaScript를 통해 동적으로 UI를 구축하며, SSR은 사용자의 요청마다 서버에서 전체 HTML을 실시간으로 생성합니다 [2]. 반면 SSG는 배포 전 빌드 시점에 모든 HTML 페이지를 미리 생성하여 CDN을 통해 정적 파일로 제공합니다 [2]. 각 렌더링 방식은 초기 로드 속도, SEO(검색 엔진 최적화), 서버 부하, 그리고 상호작용성 측면에서 서로 다른 장단점과 최적의 사용 사례를 가집니다 [4-6].

📖 Core Content

클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)

• 작동 원리: 서버는 최소한의 빈 HTML 뼈대와 함께 전체 JavaScript 번들을 브라우저에 전송합니다 [4, 7, 8]. 브라우저가 이 JavaScript를 다운로드하고 실행하여 데이터를 가져오고 DOM을 동적으로 구축합니다 [4, 8, 9].
• 장점: 초기 로드가 완료된 후에는 페이지 새로고침 없이 즉각적인 화면 전환이 가능하여 매끄럽고 상호작용이 풍부한 앱과 같은 사용자 경험을 제공합니다 [7, 10, 11]. 렌더링의 무거운 작업을 브라우저가 처리하므로 서버 부하와 호스팅 비용을 줄일 수 있습니다 [10, 12].
• 단점: 브라우저가 큰 JavaScript 번들을 모두 실행하기 전까지는 빈 화면이 표시될 수 있어 초기 로드 속도(First Contentful Paint)가 느립니다 [7, 10, 13]. 또한 검색 엔진 크롤러가 초기에 빈 페이지를 보게 되므로 SEO에 불리할 수 있습니다 [7, 14, 15].
• 적합한 사용 사례: SEO가 중요하지 않으며 고도의 상호작용이 필요한 로그인 기반의 내부 대시보드, SaaS 플랫폼, 싱글 페이지 애플리케이션(SPA) 등에 적합합니다 [4, 10, 16, 17].

서버 사이드 렌더링 (SSR, Server-Side Rendering)

• 작동 원리: 사용자가 페이지를 요청할 때마다 서버에서 데이터를 가져와 완전히 렌더링된 HTML 문서를 생성하여 브라우저에 전송합니다 [18-20]. 브라우저는 이 HTML을 즉시 표시하지만, 상호작용을 위해서는 추가로 JavaScript를 다운로드하여 HTML에 연결하는 '하이드레이션(Hydration)' 과정을 거쳐야 합니다 [18, 19, 21-23].
• 장점: 검색 엔진이 완성된 HTML 콘텐츠를 즉시 크롤링할 수 있어 SEO에 매우 유리합니다 [18, 24, 25]. 사용자가 의미 있는 콘텐츠를 빠르게 볼 수 있으며(빠른 FCP), 항상 최신 상태의 동적 데이터를 반영할 수 있습니다 [18, 24, 25].
• 단점: 모든 요청마다 서버에서 렌더링 로직을 실행해야 하므로 트래픽이 급증할 때 서버 부하와 인프라 관리 복잡성이 커집니다 [18, 21, 26, 27]. 또한, 하이드레이션 과정이 완료되기 전까지는 사용자가 버튼을 클릭해도 반응하지 않는 등 상호작용 지연(Time to Interactive) 현상이 발생할 수 있습니다 [18, 21, 23].
• 적합한 사용 사례: 실시간 데이터 업데이트와 우수한 SEO 최적화가 동시에 필요한 뉴스 사이트, 콘텐츠 위주의 웹사이트, 전자상거래 제품 페이지 등에 이상적입니다 [24, 28, 29].

정적 사이트 생성 (SSG, Static Site Generation)

• 작동 원리: 사용자의 요청 시점이 아니라, 애플리케이션의 빌드 과정에서 모든 HTML 페이지를 미리 생성(Pre-build)해 둡니다 [30-32]. 생성된 정적 파일은 CDN을 통해 배포되어 전 세계 사용자에게 즉각적으로 제공됩니다 [30, 33, 34].
• 장점: 서버 측 연산 과정이 없으므로 가장 빠르고 압도적인 페이지 로드 속도를 제공합니다 [30, 32, 34]. 미리 렌더링된 완벽한 HTML을 제공하므로 SEO 성능이 탁월하며, 대규모 트래픽에도 매우 저렴하고 효율적으로 확장할 수 있습니다 [31, 33, 35, 36].
• 단점: 콘텐츠를 업데이트하려면 사이트 전체를 다시 빌드하고 배포해야 하므로 데이터가 쉽게 구식이 될 수 있습니다 [33, 37]. 자주 변경되는 실시간 데이터나 사용자별 맞춤 콘텐츠를 제공하는 데는 한계가 있습니다 [33, 37].
• 적합한 사용 사례: 콘텐츠 변동이 적고 방문자 모두에게 동일한 정보를 제공하는 마케팅 랜딩 페이지, 블로그, 기술 문서 사이트 등에 가장 완벽한 방식입니다 [31, 38].

🔗 Knowledge Connections

• Related Topics: Hydration, Single-Page Application (SPA), Incremental Static Regeneration (ISR), Time to Interactive (TTI), First Contentful Paint (FCP)
• Projects/Contexts: Next.js, Nuxt, SvelteKit 등은 프로젝트 내에서 페이지 단위로 SSR, SSG, CSR 전략을 혼합(Hybrid)하여 사용할 수 있도록 지원하는 대표적인 프레임워크입니다 [39-41].
• Contradictions/Notes: 소스에 관련 정보가 부족합니다. (제공된 소스들 간에 CSR, SSR, SSG의 정의나 성능적 장단점 평가에 있어 상충하거나 모순되는 내용은 확인되지 않습니다.)

---

Last updated: 2026-04-25