🌐 Nuxt 렌더링 방식 이해하기

웹 애플리케이션을 개발할 때 중요한 결정 중 하나는 페이지를 언제 생성할 것인가이다.

같은 Nuxt 애플리케이션이라도 설정에 따라:

• 브라우저에서 생성하는 방식 (CSR)
• 서버 요청마다 생성하는 방식 (SSR)
• 빌드 시 미리 생성하는 방식 (SSG)
• 일정 주기로 재생성하는 방식 (ISR)

으로 동작 방식을 변경할 수 있다.

Nuxt는 특정 하나의 렌더링 방식만 제공하는 프레임워크가 아니라, 페이지 성격에 맞게 여러 렌더링 전략을 조합할 수 있도록 설계되어 있다.

1. CSR (Client Side Rendering)

CSR은 브라우저에서 JavaScript를 실행한 뒤 화면을 생성하는 방식이다.

전통적인 SPA(Vue CLI, React SPA 등)에서 사용하는 대표적인 방식이다.

사용자 요청

↓

HTML 반환
(빈 Root Element)

↓

JavaScript 다운로드

↓

브라우저에서 Vue 실행

↓

화면 렌더링

초기 HTML에는 실제 콘텐츠가 포함되지 않고, 브라우저에서 Vue 애플리케이션이 실행된 이후 화면이 생성된다.

Nuxt에서 CSR 사용하기

Nuxt는 기본적으로 SSR을 지원하지만 특정 페이지를 CSR 방식으로 변경할 수 있다.

<script setup>
definePageMeta({
  ssr: false
})
</script>

<template>
  <div>
    Client Side Rendering 페이지
  </div>
</template>

해당 페이지는 서버에서 HTML을 생성하지 않고 브라우저에서만 렌더링된다.

CSR 사용 사례

적합한 영역:

• 관리자 페이지
• 인증이 필요한 대시보드
• SEO가 중요하지 않은 서비스 영역

/admin/dashboard

/member/settings

검색 엔진 노출보다 사용자 인터랙션이 중요한 경우 적합하다.

2. SSR (Server Side Rendering)

SSR은 사용자가 페이지를 요청할 때 서버에서 HTML을 생성하는 방식이다.

Nuxt의 기본 렌더링 방식이다.

사용자 요청

↓

Nuxt Server

↓

Vue Component 실행

↓

HTML 생성

↓

브라우저 전달

↓

Hydration

서버에서 완성된 HTML을 전달하기 때문에 초기 화면 표시가 빠르고 SEO에 유리하다.

Nuxt 기본 SSR 동작

별도의 설정 없이 Nuxt 페이지는 SSR로 동작한다.

<script setup>

const { data } = await useFetch('/api/posts')

</script>

<template>

  <div>
    {{ data }}
  </div>

</template>

위 코드는 서버에서 먼저 실행되어 HTML 생성 과정에 포함된다.

SSR 장점

SEO 최적화

검색 엔진 크롤러가 완성된 HTML을 받을 수 있다.

최신 데이터 제공

요청 시 서버에서 데이터를 조회하기 때문에 항상 최신 상태를 유지할 수 있다.

동적 서비스 적합

/profile/:id

/product/:id

/dashboard

사용자마다 다른 데이터를 보여줘야 하는 페이지에 적합하다.

3. SSG (Static Site Generation)

SSG는 빌드 시점에 HTML을 미리 생성하는 방식이다.

Build 실행

↓

Nuxt 페이지 실행

↓

HTML 생성

↓

정적 파일 저장

↓

CDN 제공

사용자가 방문할 때 서버에서 생성하지 않고 이미 만들어진 HTML 파일을 반환한다.

Nuxt에서 SSG 생성하기

Nuxt에서는 generate 명령어를 사용한다.

npx nuxi generate

빌드 결과:

.output/

├── public

└── generated html

형태의 정적 결과물이 생성된다.

특정 페이지 정적 생성

Nuxt 설정에서 prerender 대상을 지정할 수 있다.

export default defineNuxtConfig({

  routeRules: {

    '/blog/**': {
      prerender: true
    }

  }

})

해당 경로는 빌드 과정에서 HTML이 생성된다.

SSG 사용 사례

정적 콘텐츠 중심 서비스:

• 기술 블로그
• 문서 사이트
• 포트폴리오
• 마케팅 페이지

4. ISR (Incremental Static Regeneration)

ISR은 SSG와 SSR의 중간 형태다.

기본적으로 정적 페이지를 제공하지만, 일정 시간이 지나면 서버에서 페이지를 다시 생성한다.

첫 요청

↓

기존 생성된 HTML 반환

↓

재생성 시간 확인

↓

필요하면 백그라운드 재생성

↓

다음 요청부터 새로운 HTML 제공

Nuxt에서 ISR 사용하기

Nuxt에서는 routeRules의 swr 또는 isr 옵션을 활용한다.

export default defineNuxtConfig({

  routeRules: {

    '/posts/**': {
      swr: 3600
    }

  }

})

의미:

3600초 동안 생성된 HTML 재사용

↓

시간 만료 후 새로운 HTML 생성

ISR 사용 사례

자주 변경되지만 매 요청마다 SSR 할 필요가 없는 서비스.

/news

/products

/ranking

특히:

• 쇼핑몰 상품 페이지
• 뉴스 사이트
• 콘텐츠 플랫폼

같은 서비스에서 유용하다.

5. SSR / SSG / ISR 선택 기준

6. Nuxt에서는 여러 방식을 함께 사용할 수 있다

Nuxt의 장점은 프로젝트 전체가 하나의 렌더링 방식으로 고정되지 않는다는 점이다.

페이지별로 렌더링 전략을 다르게 설정할 수 있다.

예:

export default defineNuxtConfig({

  routeRules: {

    // 블로그 글
    '/blog/**': {
      prerender: true
    },

    // 상품 페이지
    '/products/**': {
      swr: 3600
    },

    // 관리자 페이지
    '/admin/**': {
      ssr: false
    }

  }

})

하나의 Nuxt 프로젝트 안에서:

Blog

→ SSG


Product

→ ISR


Admin

→ CSR


User Profile

→ SSR

처럼 목적에 맞는 조합이 가능하다.

7. build와 generate의 관계

Nuxt에서 자주 혼동하는 부분은 build와 generate의 차이다.

build

npx nuxi build

Nuxt 애플리케이션을 프로덕션 실행 형태로 빌드한다.

결과:

.output/

├── server
├── public
└── nitro

Node 서버 또는 Serverless 환경에서 실행된다.

대표 방식:

SSR

generate

npx nuxi generate

정적 HTML 파일을 생성한다.

결과:

.output/public

├── index.html
├── blog/page.html
└── assets

CDN 기반 정적 배포에 적합하다.

대표 방식:

SSG

마무리

Nuxt는 단순히 SSR 프레임워크가 아니다.

하나의 프로젝트 안에서:

• CSR
• SSR
• SSG
• ISR

모든 렌더링 전략을 선택적으로 사용할 수 있는 하이브리드 프레임워크다.

중요한 것은 어떤 방식이 더 좋다는 것이 아니라,

페이지의 목적과 데이터 변경 주기에 맞는 렌더링 전략을 선택하는 것이다.