SvelteKit에서 SSR이 동작하는 방식

최근 혼자서 사이드 프로젝트를 하고 있는데 SvelteKit를 사용하기로 했다.

이유는 SSR를 사용해보고 싶었기 때문인데, 내 프로젝트는 화면도 적고 정~말 단순한 프로젝트라서 CSR를 할 필요가 없다고 느꼈고, SEO가 더 중요했기 때문이다.

SvelteKit를 처음 사용해보기도 하고 CSR만 항상 사용해봤던지라 SvelteKit에서 SSR이 어떻게 동작하는지 알아보고자 정리해본다!

먼저 SvelteKit을 처음 프로젝트에 시작하면 

이렇게 routes에 +layout, +page.svelte가 보인다.

SvelteKit의 파일 기반 라우팅

SvelteKit은 파일 기반 라우팅과 통합 서버를 통해 SSR을 자동으로 처리한다.

위 +layout은 React에 App.svelte처럼 공통 컴포넌트를 렌더링해야할 때 (예: header, footer..) 사용하는 파일이고,

+page.svelte는 기본 "/" 요청 시 렌더링 되는 화면이다.

SvelteKit은 신기한게 라우팅 경로를 지정해주지 않아도 파일기반으로 알아서 라우팅이 된다!

src/routes/
├ +page.svelte        → "/" (홈)
├ about/
│  └ +page.svelte     → "/about"
├ signin/
│  └ +page.svelte     → "/signin"

SvelteKit에서는 routes 폴더 구조 = URL 구조이기 때문에, 페이지 컴포넌트를 만들 때는 항상 +page.svelte를 사용해야 한다.

 

• 브라우저에서 /about 요청 → 서버가 src/routes/about/+page.svelte를 찾아서 렌더링
• 즉, about.svelte 같은 파일명은 안되고 반드시 +page.svelte를 써야 함

그러면 이제 SSR이 어떻게 동작되는지 알아보자!

그 전에 SSR이 무엇인지 CSR은 무엇인지 간단하게 설명해보겠다.

SSR(Server-Side Rendering)이란?

SSR은 서버에서 HTML을 미리 렌더링해서 브라우저로 전달하는 방식이다.
즉, 브라우저가 화면을 표시하기 전에 서버가 Svelte 컴포넌트를 실행하고, 결과 HTML을 만들어주는 것이다.

SSR 특징

• 초기 화면이 즉시 렌더링되어 빠르게 표시됨
• 검색 엔진 최적화(SEO)에 유리
• 서버가 컴포넌트를 실행하므로 서버 부하 존재
• 브라우저에서는 HTML과 클라이언트 JS 번들을 받아 Hydration을 수행 → 이벤트, 상태 연결

CSR(Client-Side Rendering)이란?

CSR은 브라우저가 JavaScript 번들을 실행해서 화면을 그리는 방식이다.
서버는 단순히 JS, CSS, HTML 틀만 제공하고, 실제 화면 렌더링은 브라우저가 담당한다.

CSR 특징

• 초기 로딩 시 화면이 빈 상태 → JS 실행 후 렌더링
• 서버 부하가 적음
• SEO 최적화가 어려울 수 있음
• 단일 페이지 애플리케이션(SPA) 구현에 적합

SvelteKit에서 SSR 동작 방식

SvelteKit은 파일 기반 라우팅과 통합 서버를 통해 SSR을 자동으로 처리한다.

1. 브라우저가 URL 요청 (/about 등)
2. SvelteKit 서버가 요청 URL에 맞는 +page.svelte와 +layout.svelte를 찾음
3. 서버용 번들을 실행 → HTML 문자열 생성
4. HTML을 브라우저에 전달
5. 브라우저가 JS 번들을 로드 → Hydration 수행
6. 이벤트 바인딩, 상태 관리 등 인터랙티브 UI 활성화

특징

• 개발자가 직접 app.get('*') 같은 서버 코드를 작성할 필요 없음
• src/routes 폴더 구조가 곧 URL 라우팅이 됨
• 서버 + 클라이언트 번들 자동 관리
• SSR과 CSR을 혼합해서 사용할 수 있음 (페이지별로 설정 가능하다는데 한번도 안해봄)