SSR vs SSG vs ISR | sim.junghun

SSR, SSG, ISR은 웹 페이지를 "언제, 어디서" 렌더링하느냐의 전략입니다. 각각의 트레이드오프를 이해하면 프로젝트에 맞는 최적의 선택을 할 수 있습니다.

면접에서 "SSR과 CSR의 차이"는 기본 중의 기본이고, "ISR은 뭔가요?"까지 물어보면 심화 질문입니다. 세 가지를 명확히 구분할 수 있어야 합니다.

CSR (Client-Side Rendering)

PLAINTEXT

브라우저 요청 → 빈 HTML 반환 → JS 다운로드 → JS가 DOM 생성

장점: 서버 부하 낮음, CDN 배포 용이
단점: 초기 로딩 느림, SEO 불리, 빈 화면 (FOUC)
적합: 관리자 페이지, 대시보드, 로그인 후 페이지

SSR (Server-Side Rendering)

PLAINTEXT

브라우저 요청 → 서버에서 HTML 생성 → 완성된 HTML 반환 → JS 다운로드 → 하이드레이션

장점: 빠른 FCP, SEO 유리, 소셜 공유 미리보기
단점: 서버 부하, TTFB 증가, 서버 비용
적합: 콘텐츠 중심 사이트, SEO 필수 페이지

TYPESCRIPT

// Nuxt에서 SSR 설정
export default defineNuxtConfig({
  ssr: true  // 기본값
})

SSG (Static Site Generation)

PLAINTEXT

빌드 시 모든 페이지를 HTML로 생성 → CDN에 배포 → 정적 파일 제공

장점: 최고 성능, CDN 캐싱, 서버 불필요
단점: 빌드 시간 증가, 실시간 데이터 불가, 빌드마다 재배포
적합: 블로그, 문서, 마케팅 페이지

BASH

# Nuxt에서 정적 사이트 생성
npx nuxi generate

ISR (Incremental Static Regeneration)

PLAINTEXT

첫 요청 → 캐시된 HTML 반환 → 백그라운드에서 재생성 → 다음 요청에 새 HTML 제공

장점: SSG의 성능 + 데이터 신선도, 전체 재빌드 불필요
단점: 약간의 지연 (stale 데이터), 인프라 지원 필요
적합: 상품 페이지, 뉴스, 자주 변하지만 실시간은 아닌 데이터

TYPESCRIPT

// Nuxt에서 ISR 설정
export default defineNuxtConfig({
  routeRules: {
    '/products/**': {
      swr: 3600  // 1시간마다 재생성 (Stale-While-Revalidate)
    },
    '/blog/**': {
      isr: 600   // 10분마다 재검증
    }
  }
})

비교 정리

항목	CSR	SSR	SSG	ISR
렌더링 시점	클라이언트	요청 시	빌드 시	빌드 + 재생성
FCP	느림	빠름	가장 빠름	빠름
SEO	불리	유리	유리	유리
서버 비용	없음	높음	없음	낮음
데이터 신선도	실시간	실시간	빌드 시점	주기적
빌드 시간	빠름	빠름	느림 (페이지 수)	빠름

하이브리드 렌더링 — 실전 전략

Nuxt 3에서는 라우트별로 다른 렌더링 전략을 적용할 수 있습니다.

TYPESCRIPT

export default defineNuxtConfig({
  routeRules: {
    // 홈 — 빌드 시 프리렌더링 (SSG)
    '/': { prerender: true },

    // 블로그 — ISR (1시간마다 재생성)
    '/blog/**': { swr: 3600 },

    // 상품 — ISR (30분마다 재생성)
    '/products/**': { swr: 1800 },

    // 대시보드 — CSR (SSR 비활성화)
    '/dashboard/**': { ssr: false },

    // API — CORS 허용
    '/api/**': { cors: true, headers: { 'cache-control': 'no-store' } }
  }
})

하이드레이션(Hydration)

SSR에서 서버가 보낸 HTML에 이벤트 리스너와 반응형을 연결하는 과정입니다.

PLAINTEXT

서버 HTML (정적) → 하이드레이션 → 인터랙티브 앱

주의: 서버 렌더링 HTML과 클라이언트 렌더링 결과가 일치해야 함
     → 불일치(Hydration Mismatch)가 생기면 에러 발생

VUE

<script setup lang="ts">
// 하이드레이션 불일치를 일으키는 코드
// const now = new Date()  // 서버와 클라이언트의 시간이 다름!

// 해결: 클라이언트에서만 실행
const now = ref('')
onMounted(() => {
  now.value = new Date().toLocaleString()
})
</script>

면접 팁

"어떤 렌더링 전략을 선택해야 하나요?" → ** 데이터 특성과 SEO 요구사항 **으로 판단합니다
하이드레이션 불일치(Mismatch)의 원인과 해결법을 알고 있으면 SSR 경험을 보여줄 수 있습니다
ISR의 Stale-While-Revalidate 패턴을 HTTP 캐시 전략과 연결해서 설명하면 깊이 있어 보입니다

요약

CSR은 클라이언트, SSR은 서버, SSG는 빌드 시, ISR은 빌드 + 주기적 재생성으로 렌더링합니다. Nuxt 3의 routeRules를 활용하면 라우트별로 최적의 전략을 적용하는 하이브리드 렌더링이 가능합니다. 핵심은 데이터 신선도와 성능 사이의 트레이드오프를 이해하는 것입니다.