Ch 02. SSR vs SSG vs ISR 완전 비교
"언제 HTML을 만드느냐"가 렌더링 전략의 핵심입니다. Nuxt 3는 같은 프로젝트 안에서 라우트별로 전략을 다르게 설정할 수 있습니다.
SSR — 요청마다 서버가 HTML을 만든다
SSR(Server-Side Rendering)은 사용자의 요청이 들어올 때마다 서버가 HTML을 새로 생성해서 내려보내는 방식입니다.
항상 최신 데이터를 보여줄 수 있지만, 매 요청마다 서버 연산이 발생합니다. 로그인이 필요한 페이지, 실시간 재고 정보가 중요한 쇼핑몰 상품 페이지에 적합합니다.
SSG — 빌드 시 HTML을 미리 만든다
SSG(Static Site Generation)는 nuxt generate 명령 실행 시점에 모든 페이지의 HTML을 미리 생성합니다.
서버 연산이 없으므로 응답이 매우 빠릅니다. 다만 콘텐츠가 바뀌면 전체를 다시 빌드해야 합니다. 변경이 드문 블로그, 공식 문서 사이트에 어울립니다.
ISR — 첫 요청 후 캐시하고, 주기적으로 갱신한다
ISR(Incremental Static Regeneration)은 SSR과 SSG의 중간 지점입니다. Nuxt에서는 SWR(stale-while-revalidate) 방식으로 구현합니다.
서버 부하는 낮추면서도 일정 주기로 콘텐츠를 갱신할 수 있습니다. 뉴스 목록, 상품 목록처럼 자주 바뀌지만 실시간성이 필수는 아닌 페이지에 잘 맞습니다.
렌더링 전략 비교
| 항목 | SSR | SSG | ISR |
|---|---|---|---|
| HTML 생성 시점 | 매 요청 | 빌드 시 | 첫 요청 + 만료 후 |
| 데이터 신선도 | 항상 최신 | 빌드 시 기준 | 설정한 주기 |
| 서버 부하 | 높음 | 없음 | 낮음 |
| 초기 응답 속도 | 보통 | 매우 빠름 | 빠름 (캐시 히트 시) |
| 적합한 서비스 | 쇼핑몰, SNS, 대시보드 | 블로그, 문서, 랜딩 페이지 | 뉴스, 상품 목록, 이벤트 페이지 |
Nuxt에서 라우트별 전략 설정하기
nuxt.config.ts의 routeRules에서 경로별로 전략을 지정합니다.
// nuxt.config.tsexport default defineNuxtConfig({ routeRules: { '/': { prerender: true }, // SSG — 빌드 시 생성 '/blog/**': { swr: 3600 }, // ISR — 1시간 캐시 '/products/**': { swr: 600 }, // ISR — 10분 캐시 '/dashboard': { ssr: true }, // SSR — 매 요청마다 생성 (기본값) '/admin/**': { ssr: false } // CSR — 클라이언트에서만 렌더링 }})prerender: true는 해당 라우트를 빌드 시 정적으로 생성합니다. swr에는 캐시 유효 시간(초)을 지정합니다. ssr: false를 설정하면 서버 렌더링 없이 클라이언트에서만 동작하는 SPA 모드가 됩니다.
서비스를 설계할 때 각 페이지의 "데이터가 얼마나 자주 바뀌는가"와 "얼마나 빠른 응답이 필요한가"를 기준으로 전략을 고르면 됩니다.