CSR / SSR / SSG / ISR 렌더링 방식 비교

1️⃣ CSR (Client Side Rendering)

클라이언트가 브라우저에서 JS를 실행해 UI를 렌더링

🚀 동작 방식

1. 서버는 최소한의 HTML과 JS 번들을 전송한다.
2. 브라우저가 JS를 다운로드하고 실행하여 DOM을 생성한다.
3. 필요한 데이터를 API로 호출한 뒤 화면을 렌더링한다.

✅ 장점

• 페이지 간 전환이 빠르고 부드러움 (SPA 특성)
• 서버 부하가 적고, 캐싱 구조 단순
• 클라이언트 상태 관리 용이 (Redux, Zustand 등)

❌ 단점

• 초기 로딩 지연 (JS 다운로드 + 실행 시간 필요)
• 데이터 요청 전까지 빈 화면 → CLS / LCP 악화
• SEO에 불리 (HTML에 실제 콘텐츠 없음)

🧱 예시

useEffect(() => {
  fetch('/api/posts').then(r => r.json()).then(setPosts);
}, []);

---

2️⃣ SSR (Server Side Rendering)

서버에서 요청 시 HTML을 완성해 보내는 방식

🚀 동작 방식

1. 사용자가 페이지를 요청하면 서버에서 React를 실행.
2. 데이터를 fetch → HTML 완성 후 브라우저로 전달.
3. 브라우저는 완성된 HTML을 즉시 표시 후, JS가 “hydrate”됨.

✅ 장점

• 초기 화면이 완성된 상태로 전달 → LCP / CLS 개선
• SEO 친화적 (HTML에 실제 콘텐츠 존재)
• 동적 데이터 표시 가능 (요청마다 최신화)

❌ 단점

• 서버 부하 증가 (매 요청마다 렌더링)
• 응답 속도 느림 (데이터 fetch + 렌더링 비용)
• CDN 캐싱 어려움

🧱 예시

export async function getServerSideProps() {
  const data = await fetch('<https://api.example.com/posts>').then(r => r.json());
  return { props: { data } };
}

---

3️⃣ SSG (Static Site Generation)

빌드 타임에 미리 HTML 파일을 생성해두는 방식

🚀 동작 방식

1. 배포 시점(빌드 시)에 데이터 fetch → HTML 생성
2. 사용자는 CDN에서 즉시 완성된 HTML을 받아본다.

✅ 장점

• 가장 빠른 초기 렌더 (CDN에서 정적 파일 서빙)
• CLS 0, SEO 우수
• 서버 부하 거의 없음
• 캐싱 효율 최고

❌ 단점

• 데이터 변경 시 반영 어려움 (재빌드 필요)
• 실시간 데이터 반영 불가

🧱 예시

export async function getStaticProps() {
  const data = await fetch('<https://api.example.com/featured>').then(r => r.json());
  return { props: { data } };
}

---

4️⃣ ISR (Incremental Static Regeneration)

SSG에 “주기적 갱신(revalidate)”을 더한 방식

🚀 동작 방식

1. 빌드 타임에 페이지를 정적으로 생성.
2. 일정 시간이 지나면 첫 요청 시 백그라운드에서 재생성.
3. 이후 요청은 새로운 HTML을 반환.

✅ 장점

• SSG의 속도 + SSR의 유연성
• 자주 변하지 않는 데이터에 적합 (예: 메인페이지, 리스트)
• 완벽한 SEO + CDN 캐싱

❌ 단점

• 첫 번째 요청은 이전 데이터일 수 있음 (갱신 지연)
• 백엔드 API 실패 시 오래된 HTML 유지될 수 있음

🧱 예시

export async function getStaticProps() {
  const data = await fetch('<https://api.example.com/posts>').then(r => r.json());
  return { props: { data }, revalidate: 3600 }; // 1시간마다 갱신
}

 

 

 

📊 요약 비교표

구분 렌더링 시점 데이터 신선도 초기 로딩 속도 SEO 서버 부하 적합 사례

CSR	클라이언트	최신	느림 (JS 필요)	❌	낮음	대시보드, 내부 툴
SSR	요청 시	최신	보통	✅	높음	동적 콘텐츠, 로그인 페이지
SSG	빌드 시	고정	매우 빠름	✅	매우 낮음	블로그, 랜딩페이지
ISR	빌드 + 주기적 재생성	일정 시간 내 최신	매우 빠름	✅	낮음	메인페이지, 목록 뷰

 

 

💡 선택 가이드

상황 추천 렌더링 방식

데이터가 자주 바뀌지 않음	SSG
하루/몇시간 단위로 변경	ISR
실시간, 로그인별 개인화 필요	SSR
로그인 이후 상태 기반 대화형 UI	CSR