Nuxt SSG vs SSR 완벽 비교: 특징, 장단점, 선택 기준
Nuxt는 Vue 기반의 강력한 프레임워크로, SSG(Static Site Generation)와 SSR(Server-Side Rendering)을 모두 지원합니다. 두 방식의 개념과 실제 적용 차이점을 정확히 이해하면 프로젝트에 꼭 맞는 구조를 쉽게 선택할 수 있습니다. 이번 포스팅에서는 Nuxt의 SSG/SSR 개념, 각각의 장단점, Nuxt 3에서의 설정 방법까지 한눈에 볼 수 있도록 정리합니다.
SSG (Static Site Generation)란?
SSG는 미리 모든 페이지를 HTML로 만들어 배포하는 방식입니다.
정적 사이트 생성이라고도 부르며, 대표적인 예시로 블로그, 문서 사이트, 마케팅 랜딩페이지 등이 있습니다.
주요 특징
- 빌드 시점에 모든 페이지 HTML 생성 (
npm run generate) - 서버가 필요 없고, CDN·정적 호스팅(Vercel, Netlify, GitHub Pages 등)에 최적
- 매우 빠른 페이지 이동과 응답, 서버 부하가 없음
- 캐싱이 쉬워 트래픽이 많아도 안정적
단점 및 한계
- 콘텐츠 변경 시마다 다시 빌드 필요
- 빌드 시간이 길어질 수 있음 (페이지 수가 많을수록)
- 실시간 데이터 반영이 어렵고, 동적 변화에 제약이 많음
SSR (Server-Side Rendering)이란?
SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 실시간 생성해 반환하는 방식입니다.
동적 웹앱, 로그인 기반 서비스, 실시간 콘텐츠에 적합합니다.
주요 특징
- 모든 요청에서 최신 데이터 반영 (실시간 렌더링)
- SEO(검색 최적화)에 탁월, 초기 로딩도 빠름
- 서버에서 HTML 반환 → Vue 앱이 클라이언트에서 하이드레이션됨
npm run build && npm run start로 Node.js 서버 필요
단점 및 한계
- 상시 서버가 필요 (유지비, 관리 필요)
- 요청량이 늘면 서버 부하 증가, 부하 관리 필요
- 정적 호스팅 불가
SSG vs SSR 한눈에 비교
| 비교 항목 | SSG (Static Site Generation) | SSR (Server-Side Rendering) |
|---|---|---|
| 생성 시점 | 빌드 타임 | 요청 시점 |
| 서버 필요 | 필요 없음 (정적 호스팅) | 필요함 (Node.js 등) |
| 성능 | 매우 빠름 (CDN 캐시) | 초기 빠름, 트래픽 많으면 느려질 수 있음 |
| 데이터 갱신 | 빌드해야 갱신 | 요청마다 최신 데이터 반영 |
| 추천되는 활용 | 블로그, 마케팅, 문서 | 대시보드, 실시간, 로그인 서비스 |
Nuxt에서 SSG/SSR 설정법
Nuxt 3 기준으로, 설정이 단순화되었습니다.
nuxt.config.ts 예시
export default defineNuxtConfig({
ssr: true // SSR 사용 (기본값 true)
})
ssr: true이면 SSR,ssr: false이면 SPA(클라이언트 렌더링)- Nuxt 2에서는
target: 'static'을 함께 사용해 SSG를 명시했으나, Nuxt 3에서는ssr: true로만 제어하며 자동 최적화됨
빌드 명령어
| 명령어 | 설명 |
|---|---|
| npm run generate | SSG 빌드 (정적 HTML 생성) |
| npm run build & start | SSR 서버 모드로 빌드 및 실행 |
SSG와 SSR, 언제 어떤 방식을 쓸까?
프로젝트 성격과 트래픽, 데이터 갱신 빈도에 따라 선택이 달라집니다.
- SSG 추천
- 콘텐츠 변경이 적은 블로그, 문서, 포트폴리오, 제품 소개
- 낮은 서버 유지비와 빠른 응답이 중요할 때
- SSR 추천
- 로그인 사용자별 대시보드, 마이페이지 등 맞춤형 콘텐츠
- 실시간 데이터(뉴스, 주식 등)가 많은 서비스
- SEO와 데이터 최신성이 중요한 서비스
마무리: Nuxt SSG/SSR 선택의 핵심
이번 글에서는 Nuxt의 SSG와 SSR 방식의 구조적 차이, 장단점 그리고 실제 Nuxt 3에서의 설정 방법까지 정리해보았습니다.
각 방식의 특성을 잘 파악하면 프로젝트의 성격에 맞는 최적의 구조를 선택할 수 있습니다.
실제 적용에서는 데이터 변경 주기, 서버 인프라, SEO 중요도 등을 종합적으로 고려하여 결정하는 것이 중요합니다.
Nuxt의 유연한 생태계를 잘 활용해서, 더 효율적이고 유지보수성 높은 서비스를 설계해보시기 바랍니다.