mason
mason-log.

mason

mason.

안녕하세요. mason 입니다.

architecture

SSR, CSR, SSG, ISR.

렌더링 전략 4가지의 차이, Next.js 관점, 선택 기준

전략HTML 생성 시점설명
CSR브라우저 (JS)빈 shell + API fetch
SSR요청마다 서버always fresh, TTFB↑
SSG빌드 시정적 HTML, CDN
ISRSSG + 주기적/온디맨드 재생성stale-while-revalidate

💻 CSR (Client-Side Rendering)

CSR SSR SSG ISR HTML 생성 시점 비교

  • 초기 HTML 가벼움 → JS 다운로드/실행 후 UI
  • SEO, FCP에 불리 (크롤러/사용자 모두)
  • 대시보드, 로그인 후 영역에 적합

🖥️ SSR (Server-Side Rendering)

  • 매 요청 서버에서 HTML → 최신 데이터, 서버 부하
  • Next.js Pages: getServerSideProps, App: dynamic fetch no cache

📦 SSG (Static Site Generation)

  • 빌드 타임 HTML → CDN 배포, 매우 빠름
  • 데이터 변경 시 재빌드 필요
  • 블로그, 문서, 마케팅 페이지

♻️ ISR (Incremental Static Regeneration)

  • SSG 페이지를 백그라운드에서 갱신
  • revalidate: 60 — 60초마다 stale 허용 후 재생성
  • 트래픽 급증 + 자주 바뀌는 콘텐츠 타협점

🎯 선택 가이드

  • 개인화/실시간 → SSR 또는 CSR + client fetch
  • 거의 안 바뀜 → SSG
  • 가끔 바뀜, 트래픽 큼 → ISR
  • Next.js route별 전략 (이 블로그: posts SSG, API dynamic)

🔗 참고 자료