SvelteKit SSR vs CSR vs SSG — 언제 무엇을 써야 하나

SvelteKit 렌더링 모드란?

SvelteKit은 단일 프레임워크 안에서 SSR(Server-Side Rendering), CSR(Client-Side Rendering), SSG(Static Site Generation), 그리고 하이브리드 렌더링까지 모두 지원합니다. “어떤 렌더링 모드를 써야 하나?”라는 질문은 SvelteKit을 시작하는 개발자라면 누구나 한 번쯤 마주치는 고민입니다. 이 글에서는 각 모드의 동작 원리, SEO 영향, 성능 특성, 실전 적용 기준을 코드와 함께 상세히 정리합니다.

SSR (서버 사이드 렌더링)

SSR은 요청이 들어올 때마다 서버에서 HTML을 생성해 클라이언트로 전달하는 방식입니다. SvelteKit에서는 +page.server.ts의 load 함수가 서버에서 실행되고, 그 결과로 완성된 HTML이 브라우저에 전달됩니다. 첫 페이지 로딩 속도(FCP)가 빠르고 검색 엔진 크롤러가 완성된 HTML을 바로 읽을 수 있어 SEO에 유리합니다.

SSR 기본 설정 (+page.server.ts)

// src/routes/blog/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.slug}`);
  
  if (!response.ok) {
    error(404, '포스트를 찾을 수 없습니다');
  }
  
  const post = await response.json();
  
  return {
    post,
    // 메타데이터도 서버에서 준비
    meta: {
      title: post.title,
      description: post.excerpt
    }
  };
};

SSR이 유리한 경우: 콘텐츠가 자주 바뀌는 뉴스, 이커머스 상품 페이지, 로그인이 필요한 대시보드, SEO가 중요한 모든 페이지. 단점은 매 요청마다 서버 연산이 필요해 트래픽이 늘면 서버 비용도 증가한다는 점입니다.

CSR (클라이언트 사이드 렌더링)

CSR은 브라우저에서 JavaScript로 DOM을 생성하는 방식입니다. 서버는 빈 HTML 껍데기와 JS 번들만 전달하고, 실제 콘텐츠는 클라이언트가 API를 직접 호출해 채웁니다. 초기 로딩은 느리지만 이후 페이지 전환이 빠르고, 관리자 페이지처럼 SEO가 필요 없는 내부 도구에 적합합니다.

CSR 전용 페이지 설정

// src/routes/admin/+page.ts
// CSR 전용: SSR 비활성화
export const ssr = false;
export const prerender = false;

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch }) => {
  // 이 코드는 브라우저에서만 실행
  const response = await fetch('/api/admin/stats');
  const stats = await response.json();
  
  return { stats };
};

export const ssr = false 한 줄로 해당 라우트를 완전한 CSR 모드로 전환할 수 있습니다. 관리자 패널, 실시간 대시보드, 인터랙션이 복잡한 SPA 내부 페이지에서 이 패턴을 자주 씁니다.

SSG (정적 사이트 생성)

SSG는 빌드 타임에 모든 페이지를 HTML 파일로 미리 생성해두는 방식입니다. 서버 없이 CDN에서 정적 파일만 서빙하기 때문에 응답 속도가 가장 빠르고 운영 비용이 거의 없습니다. 블로그, 문서 사이트, 마케팅 랜딩 페이지처럼 콘텐츠 변경이 드문 페이지에 최적입니다.

SSG 설정 — 전체 사이트 정적 빌드

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: undefined, // SPA fallback 필요 시 'index.html'
      precompress: false,
      strict: true
    }),
    prerender: {
      handleMissingId: 'warn'
    }
  }
};

export default config;

동적 라우트(예: /blog/[slug])를 SSG로 만들려면 entries를 명시하거나 +page.server.ts의 load가 사전에 실행 가능해야 합니다. adapter-static으로 빌드한 결과물은 Vercel, Netlify, Cloudflare Pages, S3 등 어디서든 배포할 수 있습니다.

하이브리드 렌더링 — 페이지별 전략 혼합

SvelteKit의 가장 강력한 기능 중 하나는 같은 프로젝트 안에서 라우트별로 렌더링 방식을 다르게 지정할 수 있다는 점입니다. 메인 페이지는 SSG, 상품 상세는 SSR, 관리자 페이지는 CSR — 이런 혼합 구성이 단일 설정 파일 없이 라우트 파일에서 바로 제어됩니다.

라우트별 렌더링 전략 혼합 예시

// src/routes/+page.ts — 메인 페이지: SSG (빌드 타임 생성)
export const prerender = true;

// src/routes/products/[id]/+page.server.ts — 상품 상세: SSR
// (기본값이 SSR이므로 별도 설정 불필요)
export const load = async ({ params }) => {
  const product = await db.product.findById(params.id);
  return { product };
};

// src/routes/admin/+layout.ts — 관리자 전체: CSR
export const ssr = false;

// src/routes/docs/[slug]/+page.ts — 문서: SSG + 동적 경로
export const prerender = true;
export const entries = async () => {
  const slugs = await getDocSlugs(); // 빌드 타임에 모든 슬러그 생성
  return slugs.map(slug => ({ slug }));
};

SEO 관점에서 본 렌더링 모드 비교

검색 엔진 최적화 관점에서 SSG > SSR > CSR 순으로 유리합니다. SSG는 미리 생성된 HTML을 즉시 제공해 크롤러가 콘텐츠를 가장 쉽게 인식합니다. SSR은 매번 서버에서 최신 HTML을 생성하므로 동적 콘텐츠도 SEO에 반영됩니다. CSR은 JavaScript를 실행해야 콘텐츠가 보이기 때문에 구글봇 외의 크롤러에서는 빈 페이지로 인식될 수 있습니다.

항목	SSG	SSR	CSR
초기 로딩 속도	⭐⭐⭐	⭐⭐	⭐
SEO 적합성	⭐⭐⭐	⭐⭐⭐	⭐
실시간 데이터	⭐	⭐⭐⭐	⭐⭐⭐
서버 비용	⭐⭐⭐	⭐	⭐⭐
빌드 복잡도	⭐⭐	⭐⭐⭐	⭐

실전 선택 기준

렌더링 모드를 선택할 때 핵심 질문 세 가지를 던져보세요. ①이 페이지의 데이터는 얼마나 자주 바뀌나? ②SEO가 필요한 페이지인가? ③로그인이 필요한 개인화 페이지인가? 데이터가 자주 안 바뀌고 SEO가 중요하면 SSG. 데이터가 실시간으로 바뀌고 SEO도 중요하면 SSR. 로그인 후 개인화된 내부 도구라면 CSR을 선택하면 됩니다.

코드벤터는 다양한 프로덕션 SvelteKit 프로젝트를 통해 쌓은 렌더링 전략 노하우를 바탕으로, 글로벌 협력 네트워크와 함께 클라이언트의 서비스 특성에 맞는 최적의 웹 아키텍처를 설계하고 구현합니다. SSR/SSG/CSR 혼합 전략부터 성능 최적화, 배포 자동화까지 — 코드벤터와 함께라면 빠르고 안정적인 서비스를 만들 수 있습니다.