대상 독자: 웹 서비스 기획자, 풀스택 입문자, 아키텍처 의사결정자

핵심 개념

렌더링 방식 HTML 생성 시점 처리 주체 강점 약점
SSR (Server-Side Rendering) 요청 시점 Server 개인화 · 보안 · SEO 서버 비용 · 응답 지연
SSG (Static Site Generation) 빌드 시점 빌드 도구 → CDN 속도 · 비용 · 안정성 실시간 데이터 반영 어려움
CSR (Client-Side Rendering) 런타임(브라우저) Client Browser 대화형 UI · 빠른 화면 전환 초기 로딩 느림 · SEO 불리
⚡
개인화 · 민감 데이터 → SSR

분야별 사례 비교

SSR — Server가 매 요청마다 HTML을 생성

분야 대표 Framework / 스택 왜 SSR인가
대학 행정 포털 (성적표 · 수강내역) PHP(WordPress), Java(Spring MVC), Ruby on Rails 로그인 · 권한 · 개인화 데이터에 따라 서버가 매 요청 HTML 생성
이커머스 (주문내역 · 계정 페이지) Next.js(SSR 모드), Django 템플릿 사용자별 데이터 제공, SEO와 초기 응답 품질이 매출에 직결
금융 포털 (계좌 · 거래내역 조회) Spring MVC, Thymeleaf 등 서버 템플릿 민감 정보를 서버에서 가공 · 접근 통제 중심

CSR — Client Browser가 UI와 상태를 관리

분야 대표 Framework / 스택 왜 CSR인가
클라우드 웹앱 (이메일 · 대시보드 · 협업 도구) Google 웹앱, Looker Studio, AppSheet 브라우저에서 UI · 상태 관리, API 호출로 데이터 실시간 갱신
디자인 · 협업 도구 Figma, Notion, React SPA 고빈도 상호작용, 화면 전환 대부분 클라이언트 주도
사내 업무 대시보드 · 어드민 콘솔 SPA(React, Vue) + REST / GraphQL API SEO 비중 낮고, 인터랙션 중심

SSG — 빌드 시점에 HTML을 미리 생성 · CDN 배포

분야 대표 Framework / 스택 왜 SSG인가
기업 홈페이지 · 마케팅 랜딩 · 블로그 Next.js(SSG 모드), Gatsby 빌드 시 HTML 생성 → CDN 배포, 초기 로딩 매우 빠름
제품 문서 · 개발자 문서 Next.js SSG, Hugo, MkDocs 공개 정보, 변경 주기가 명확하여 정적 빌드에 최적

선택 기준별 요약

판단 축 SSR CSR SSG
개인화 · 인증 ✅ 최적 ⚠️ 토큰 기반 가능 ❌ 부적합
SEO ✅ 유리 ❌ 불리 ✅ 최적
초기 로딩 속도 ⚠️ 서버 응답에 의존 ❌ JS 다운로드 후 렌더 ✅ CDN 직접 배포
인터랙션 밀도 ⚠️ 부분 하이드레이션 필요 ✅ 최적 ❌ 정적
운영 비용 ❌ 서버 상시 가동 ⚠️ API 서버 필요 ✅ CDN만으로 충분