CSR vs SSR vs SSG vs Edge

현대 웹 렌더링 4대 방식의 핵심 차이

---

🍱 1️⃣ 한 줄 요약 (먼저 큰 그림부터)

방식	누가	HTML을 만드나언제 만드나	특징
CSR	브라우저	페이지를 연 후에	JS로 직접 렌더링
SSR	서버(Node.js)	요청 즉시	매 요청마다 새 HTML 생성
SSG	서버(빌드 시)	배포 전에 미리	이미 완성된 HTML 파일
Edge Rendering	CDN 엣지 서버(전세계 노드)	요청 시, 사용자 근처에서	SSR과 같지만 훨씬 빠름

---

🧩 2️⃣ 비유로 이해하기 (레스토랑 버전 🍽️)

방식	비유	특징
CSR	손님이 재료를 받아서 직접 요리	초기 느림 (JS 해석 필요), 이후 빠름
SSR	주방장이 손님 주문 즉시 조리	즉시 완성된 요리 제공, 서버 부하 있음
SSG	미리 만들어 둔 도시락 꺼내줌	매우 빠름, 대신 내용 자주 못 바꿈
Edge Rendering	전세계 여러 주방이 손님 가까운 곳에서 요리	초고속 응답, 서버 부하 분산

---

⚙️ 3️⃣ 실제 동작 비교

🟢 CSR (Client Side Rendering)

 

1. 브라우저가 HTML 요청 2. 서버: 빈 HTML + JS 보내줌 3. 브라우저: JS 실행해서 화면 만듦

✅ 장점: 서버 부하 적음
❌ 단점: 초기 로딩 느림, SEO 불리

---

🔵 SSR (Server Side Rendering)

 

1. 브라우저가 페이지 요청 2. 서버(Node.js): React 코드 실행 → HTML 생성 3. 브라우저: 완성된 HTML 수신 → 즉시 표시

✅ 장점: 초기 빠름, SEO 좋음
❌ 단점: 요청 많아지면 서버 부하 증가

---

🟣 SSG (Static Site Generation)

 

1. 배포할 때(빌드 시) HTML을 미리 생성 2. 서버는 파일 그대로 전달

✅ 장점: 매우 빠름 (CDN 캐싱), 서버 부하 0
❌ 단점: 실시간 데이터 반영 어려움
→ 예: 블로그, 공지사항, 문서 사이트

---

🟠 Edge Rendering (엣지 렌더링)

 

1. 사용자가 요청 2. 가장 가까운 CDN 노드(엣지 서버)가 SSR 수행 3. 전송 거리 ↓ → 응답 속도 ↑

✅ 장점: SSR 속도 단축, 글로벌 유저 대응 최적
❌ 단점: 엣지 환경 제약 (Node API 제한 있음)

---

🌍 4️⃣ 위치 기반 비교도 (그림 느낌)

             [유저]
                │
                ▼
 ┌─────────────────────────────────┐
 │        요청 → 응답 과정         │
 ├──────────────┬──────────────────┤
 │ CSR          │ 브라우저가 직접 그림(JS)  │
 │ SSR          │ 서버(Node.js)가 그림       │
 │ SSG          │ 미리 그림(빌드 시 생성)    │
 │ Edge         │ 가까운 CDN이 그림          │
 └──────────────┴──────────────────┘

---

🧠 5️⃣ 정리 요약

항목	CSR	SSR	SSG	Edge
HTML 생성 시점	브라우저 실행 중	요청 시	배포 시	요청 시
서버 부하	가장 낮음	높음	없음	낮음
초기 속도	느림	빠름	매우 빠름	매우 빠름
SEO	약함	좋음	좋음	좋음
데이터 최신성	실시간	실시간	배포 시점 기준	실시간
대표 사용처	SPA, 관리자 도구	로그인/대시보드	블로그, 문서	글로벌 사용자 대상 SSR
기술 예시	React, Vue	Next.js SSR	Next.js SSG	Next.js Edge, Cloudflare, Vercel Edge

---

🧭 6️⃣ 한 줄씩 요약하면

• CSR 👉 “브라우저가 직접 요리하는 웹앱” (SPA)
• SSR 👉 “요청 때마다 서버가 요리” (SEO와 초기 속도 중심)
• SSG 👉 “요리를 미리 해두는 정적 사이트” (문서/블로그형)
• Edge Rendering 👉 “사용자 근처에서 요리” (전세계 고속 반응)

---

💡 Tip: 실제 혼합 운영 (Next.js 같은 프레임워크)

현대 프레임워크(Next.js)는 이 4가지 방식을 페이지마다 선택할 수 있습니다: 

페이지	유형추천 렌더링 방식
로그인, 마이페이지	SSR
공지사항, 회사소개	SSG
앱 내 설정 페이지, 대시보드	CSR
글로벌 방문자 대상 홈	Edge Rendering