반응형
✅ 1. SSR (Server-Side Rendering)
💬 개념
브라우저가 보기 전에, 서버가 먼저 HTML을 만들어서 보내주는 방식
- 사용자가 페이지에 접속하면 서버가 HTML을 그때 생성함
- 초기 로딩이 빠르고 SEO에 강함 (검색 엔진이 쉽게 읽을 수 있음)
- 서버가 항상 살아있어야 함
💻 흐름
- 브라우저가 /posts 요청
- Nuxt 서버가 HTML을 서버에서 렌더링
- 완성된 HTML이 브라우저에 전송됨
- 브라우저에서 Hydration(인터랙션 가능하게) 진행
🔧 Nuxt 설정 (기본값)
Nuxt 3는 기본이 SSR 모드야. 따로 설정하지 않아도 동작해.
ts
복사편집
// nuxt.config.ts export default defineNuxtConfig({ ssr: true })
🧠 언제 쓰면 좋을까?
- SEO가 중요한 페이지 (블로그, 제품 상세 페이지)
- 페이지마다 내용이 다를 때 (ex. 로그인, 동적 콘텐츠)
- 초기 렌더링 속도가 중요할 때
✅ 2. SSG (Static Site Generation)
💬 개념
빌드할 때 HTML을 미리 만들어두는 방식 (정적 HTML 파일)
- 페이지 접속 시 서버 렌더링 없이 HTML을 바로 보여줌
- 속도가 엄청 빠르고, 서버리스 호스팅도 가능 (Netlify, Vercel 등)
- 데이터가 자주 변하지 않는 페이지에 적합
💻 흐름
- npm run generate 실행
- dist/ 폴더에 HTML이 생성됨
- 사용자는 CDN에서 즉시 HTML 파일을 받아봄
🔧 Nuxt 설정
ts
복사편집
// nuxt.config.ts export default defineNuxtConfig({ ssr: true, target: 'static' // or use `nitro preset` })
또는 generate 시 명령어로 사용:
bash
복사편집
nuxi generate
🧠 언제 쓰면 좋을까?
- 블로그처럼 콘텐츠가 자주 안 바뀌는 경우
- 방문자 수가 많고 서버 부하를 줄이고 싶을 때
- 비용이 적고 빠른 사이트를 원할 때
📊 비교 정리표
항목SSRSSG
| SEO | 매우 좋음 | 좋음 |
| 속도 | 빠름 (서버 필요) | 매우 빠름 (CDN 가능) |
| 서버 필요 | ✅ 있음 | ❌ 없음 (정적 파일만) |
| 데이터 최신성 | 항상 최신 | 빌드시 고정 |
| 대표 사용처 | 쇼핑몰, 대시보드 | 블로그, 소개페이지 |
💡 Nuxt에서 둘 다 쓰는 것도 가능할까?
가능해!
Nuxt 3는 혼합 모드를 지원해.
즉, 일부 페이지는 SSR, 일부 페이지는 SSG로 설정할 수 있어.
예시:
ts
복사편집
// pages/posts/[slug].vue export const prerender = true // 이 페이지만 정적으로 생성됨 (SSG)
🧠 마무리 한 줄 요약
- SSR은 "서버에서 그때그때 HTML 생성" (유연함, 실시간)
- SSG는 "빌드시 HTML 미리 만들어둠" (빠름, 정적)
반응형
댓글