Vercel에서 SvelteKit 1.0 사용하기

SvelteKit 1.0이 2022년 12월 정식 출시됐다. Svelte 기반의 풀스택 웹 프레임워크로 빌드 시점에 컴포넌트를 컴파일해 런타임 프레임워크 없이 작은 번들을 생성하며 SSR, SSG, TypeScript를 기본 지원한다. 이 글은 1.0의 라우팅·데이터 로딩·레이아웃 시스템 설계와 이전 버전 대비 주요 변경 사항을 정리한다.

핵심 포인트

디렉터리 기반 라우터: /src/routes 폴더 구조가 URL 경로, +page.svelte가 라우트를 명시적 선언
데이터 로딩 분리: load 함수가 +page.js / +page.server.js 별도 파일로 분리, 서버-클라이언트 코드 경계 명확화
그룹 레이아웃: (app)/, (marketing)/ 괄호 폴더는 URL에 영향 없이 레이아웃 범위 분리
이전 버전 대비 3가지 핵심 변경: 파일→디렉터리 라우팅, __layout.svelte→+layout.svelte, context=module→별도 load 파일

상세 정리

라우팅 구조: /src/routes/+page.svelte가 루트, /src/routes/about/+page.svelte가 /about 경로 담당. 디렉터리 구조가 URL 구조와 1:1 대응해 명시성 확보.
마이그레이션 (라우팅): 구버전 routes/about.svelte → 신버전 routes/about/+page.svelte. 파일명이 아닌 디렉터리로 라우트 생성, 우연한 라우트 생성 방지.
레이아웃 시스템: +layout.svelte로 여러 페이지에 공통 마크업/스타일 적용. 중첩 레이아웃 지원. 마이그레이션: __layout.svelte → +layout.svelte, Named 레이아웃 → 그룹 레이아웃((app)/).
그룹 레이아웃: (app)/routes/와 (marketing)/routes/ 처럼 괄호로 그룹을 만들면 URL 경로에 영향 없이 레이아웃 분리 적용.
데이터 로딩: +page.js에서 load 함수를 export하면 반환값이 +page.svelte의 data prop으로 전달. +page.server.js는 서버 전용 실행 강제 (DB/시크릿 접근 안전).
레이아웃 데이터: +layout.js의 load 함수 반환값은 해당 레이아웃과 모든 자식 페이지에서 접근 가능.
엔드포인트: +server.js 파일에 GET/POST 등 HTTP 동사 함수를 export해 API 라우트 구성. SvelteKit의 json() 헬퍼로 Response 객체 반환. 마이그레이션: about.json.js → about/+server.js, 동사 함수 대문자 필수.
어댑터: @sveltejs/adapter-auto가 배포 환경을 자동 감지. Vercel 배포 시 zero-config, Edge Functions 지원(동적 페이지를 CDN 속도로 제공).
Vercel 통합: Edge Functions 지원으로 SSR 페이지를 전 세계 엣지에서 제공 가능. Vercel Analytics 기본 내장, GitHub/GitLab CI 자동 연동.

왜 읽나SvelteKit 1.0으로 처음 시작하거나 이전 버전에서 마이그레이션하는 프론트엔드 개발자에게 라우팅·데이터 로딩·레이아웃 시스템의 설계 철학과 실제 마이그레이션 체크리스트 참고서.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Vercel에서 SvelteKit 1.0 사용하기

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기