SSR, SSG, SPA 모드 비교
ssr:true/false, Nitro 사전 렌더링, generate 명령과 라우트별 하이브리드 렌더링을 살펴봅니다.
SSR, SSG, SPA 모드 비교은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
렌더링 방식 개요
Nuxt는 세 가지 방식으로 앱을 렌더링할 수 있습니다. SSR은 서버가 각 요청을 렌더링하고, SSG는 빌드 시 페이지를 미리 생성하며, SPA는 브라우저에서 모든 것을 렌더링합니다. 경로별로 방식을 조합할 수도 있습니다.
SSR: 기본 방식
ssr: true를 사용하면 기본적으로 서버가 각 요청에 대한 HTML을 렌더링하고 클라이언트가 이를 하이드레이션합니다. 크롤러가 완전한 마크업을 볼 수 있으므로 첫 화면이 빠르게 표시되고 검색 엔진 최적화에도 유리합니다.
// nuxt.config.ts
export default defineNuxtConfig({
ssr: true
})SSR이 특히 유용한 경우
SSR은 자주 변경되거나 개인화되는 콘텐츠에 적합합니다. 대시보드, 피드, 실시간 가격이 표시되는 전자상거래처럼 모든 요청에서 최신 HTML을 제공해야 하는 경우에 사용합니다.
SPA 방식
ssr: false로 설정하면 Nuxt가 단일 페이지 앱이 됩니다. 서버는 빈 셸을 보내고 브라우저가 모든 것을 렌더링합니다. 호스팅은 더 간단하지만 검색 엔진 최적화가 약하고 첫 화면 표시가 느립니다.
export default defineNuxtConfig({
ssr: false
})SPA가 적합한 경우
SPA 방식은 내부 도구나 로그인 뒤에서 사용하는 앱에 적합합니다. 검색 엔진 최적화가 중요하지 않고, 정적 파일로 빌드하여 어떤 CDN에도 배포하려는 경우에 유용합니다.
SSG: 정적 사이트 생성
nuxt generate를 실행하면 빌드 시 모든 페이지가 정적 HTML로 미리 렌더링됩니다. 그 결과 Node 서버 없이 어디서나 호스팅할 수 있는 파일 폴더가 생성됩니다.
npx nuxt generate
# outputs static HTML to .output/publicSSG가 적합한 경우
SSG는 블로그, 문서, 마케팅 사이트처럼 거의 변경되지 않는 콘텐츠에 적합합니다. 페이지가 매우 빠르고 CDN에서 저렴하게 제공할 수 있습니다.
routeRules를 사용한 경로별 렌더링
routeRules 설정은 경로 패턴별로 렌더링 방식을 지정합니다. 이를 하이브리드 렌더링이라고 하며, 하나의 앱에서도 부분마다 서로 다른 전략을 사용할 수 있습니다.
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/admin/**': { ssr: false },
'/blog/**': { swr: 3600 }
}
})일반적인 routeRules 옵션
prerender: true는 빌드 시 페이지를 미리 생성하고, ssr: false는 SPA로 만들며, swr: n은 SSR 결과를 n초 동안 캐시합니다(오래된 결과를 제공하면서 백그라운드에서 재검증). redirect는 사용자를 다른 위치로 보냅니다.
점진적 정적 재생성
isr 옵션은 첫 요청에서 페이지를 미리 렌더링하고 출력을 캐시한 뒤 주기적으로 다시 생성합니다. 인기 페이지에서 SSG의 속도와 SSR의 최신성을 결합할 수 있습니다.
routeRules: {
'/products/**': { isr: 600 }
}전략 선택하기
검색 엔진 최적화와 상호작용성을 모두 얻을 수 있는 기본 방식으로 SSR부터 시작하세요. 정적 콘텐츠에는 SSG를, 비공개 앱에는 SPA를 사용하고, 성능 요구 사항이 드러나면 routeRules로 개별 경로를 세밀하게 조정하세요.
빠른 확인
렌더링 방식에 대한 지식을 확인해 보세요.
복습
렌더링 방식을 배웠습니다:
- SSR은 기본적으로 요청마다 렌더링되며, 검색 엔진 최적화와 빠른 첫 화면 표시에 유리합니다.
- ssr:false는 비공개 앱을 위한 SPA를 제공합니다.
- nuxt generate는 정적인 SSG 사이트를 생성합니다.
- routeRules는 경로별로 prerender, swr, isr, ssr:false를 설정하는 하이브리드 렌더링을 지원합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“SSR, SSG, SPA 모드 비교” 강의는 무료인가요?
네 — “SSR, SSG, SPA 모드 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“SSR, SSG, SPA 모드 비교”에서 뭘 배우나요?
ssr:true/false, Nitro 사전 렌더링, generate 명령과 라우트별 하이브리드 렌더링을 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“SSR, SSG, SPA 모드 비교” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.