Nuxt - Rendering Mode

Nuxt 3에서 사용할 수 있는 렌더링 모드에는 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성(SSG) 등의 방식이 있습니다. 렌더링 방식의 선택은 상황에 맞게 결정하면 되므로, 각 방식을 어떻게 사용하는지 알아보도록 하겠습니다.

서버 사이드 렌더링

서버 사이드 렌더링은 페이지를 서버에서 렌더링하여 HTML로 응답을 보내는 방식입니다. 서버 사이드 렌더링은 사용자 입장에서 초기 로딩 속도가 빠르다는 장점이 있고 검색 엔진 최적화에 도움이 됩니다.

SSR 설정 방법

nuxt.config.ts

export default defineNuxtConfig({
  ssr: true,
});

Nuxt에서는 디폴트 값이 true이므로, 따로 설정하지 않는다면 SSR로 동작합니다.

---

클라이언트 사이드 렌더링

클라이언트 사이드 렌더링은 모든 렌더링이 브라우저에서 이루어지는 방식입니다. 서버로부터는 거의 빈(?) HTML만 전달받고, 클라이언트 단에서 HTML 구조가 완성됩니다. CSR은 주로 SPA에서 사용되며, 페이지 간 이동이 빠르다는 장점이 있습니다.

CSR 설정 방법

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
});

---

정적 사이트 생성(SSG: Static Site Generation)

SSG는 페이지를 빌드 시 미리 정적 HTML 파일로 변환하는 방식입니다. 정적 파일은 CDN에 배포될 수 있어 아주 빠른 속도로 페이지를 제공할 수 있으며, 서버 리소스도 거의 필요하지 않습니다. 이 방식은 SEO에 유리하면서도 서버 부담을 최소화할 수 있는 방법으로, 블로그, 문서 사이트, 마케팅 페이지 등에 적합합니다.

SSG 설정 방법

nuxt.config.ts

export default defineNuxtConfig({
  target: 'static', // 정적 사이트 생성 모드로 설정
});

SSG는 빌드 시 아래 명령어를 입력하여 정적 페이지를 생성해야 합니다.

npx nuxi generate

---

하이브리드 렌더링 (Hybrid Rendering)

하이브리드 렌더링이란 SSR과 SSG를 혼합한 하이브리드 방식을 말합니다. 일부 페이지는 서버 사이드 렌더링으로 처리하고, 나머지는 정적으로 생성하는 방식입니다. 아래와 같이 설정할 수 있습니다.

export default defineNuxtConfig({
  ssr: true, // SSR 활성화
  nitro: {
    prerender: {
      routes: ['/about', '/contact'], // 정적으로 미리 생성할 페이지
    },
  },
});

SSR을 활성화 하고, prerender에 라우트 정보를 입력하면 해당 페이지는 정적 페이지로 생성됩니다.

아래는 ChatGPT가 각 모드를 비교한 표입니다.