Svelte 5 비동기 처리 개선: SvelteKit 기존 방식과의 비교 문서입니다.
스벨트가 드디어 엔터프라이즈급으로 성장하는 게 아닐까요?
Svelte 5는 Svelte Summit 2024에서 Rich Harris가 발표한 “What Svelte Promises” 세션을 통해, 비동기 처리 메커니즘의 대대적인 개선을 예고했습니다. 기존 SvelteKit 개발자들이 겪던 비동기 데이터 로딩의 불편함(예: 필수적인 load 함수 사용, 라우터 종속적인 데이터 패칭, 복잡한 타입 정의, 느린 순차 처리, 다중 로딩 화면 등)을 해결하고, 컴포넌트 수준에서 간결하고 직관적인 비동기 코드를 작성할 수 있게 된 것입니다. 이번 섹션에서는 SvelteKit (Svelte 3/4)에서의 기존 방식과 Svelte 5에서 새롭게 도입되는 방식들을 실제 개발 시나리오에 빗대어 비교하고, 각각이 개발 경험을 어떻게 향상시키는지 살펴보겠습니다.
SvelteKit의 전통적인 데이터 로딩은 페이지 파일의 load 함수 혹은 컴포넌트 onMount/{#await} 블록을 활용하는 방식이었습니다. 예를 들어, 페이지 컴포넌트에서 데이터를 가져오기 위해 +page.ts에 export async function load()를 구현하고 fetch를 수행한 뒤, 페이지 Svelte 컴포넌트에서는 전달된 props를 사용했습니다. 이러한 방식은 SSR(서버 사이드 렌더링)을 통해 초기 데이터를 미리 렌더링해주는 이점이 있었지만, 개발자 입장에서는 몇 가지 불편함이 있었습니다:
여러 군데 분리된 로직: 페이지 컴포넌트의 UI와 데이터 로직이 분리되어 한 파일에서 모든 흐름을 파악하기 어려웠습니다. 간단한 데이터 요청이라도 load 함수 파일과 Svelte 컴포넌트 파일 두 곳을 오가야 했습니다.
라우터 종속성: load 함수는 SvelteKit 라우팅에 묶여 있어 페이지 단위로만 동작하므로, 일반 컴포넌트에서는 사용할 수 없고, 페이지 외의 컴포넌트는 onMount에서 별도로 데이터를 가져와야 했습니다. 이는 라우터와 무관한 컴포넌트의 재사용성을 떨어뜨렸습니다.
복잡한 타입 정의: TypeScript 환경에서 load 함수의 반환값은 SvelteKit이 경로 기반으로 생성하는 PageData 타입으로 정의되는데, 이를 위해 별도의 제네릭 타입 선언이나 .d.ts 설정이 필요했습니다. 이처럼 타입 생성이 번거롭고 자동 생성된 타입을 개발자가 완전히 이해하기 어려워 **“타입 꼼수(type shenanigans)”**라는 지적도 있었죠.
순차 처리로 인한 지연: load 함수나 onMount 내부에서 연속된 비동기 작업이 있을 경우 기본적으로 순차적으로 실행되었습니다. 개발자가 명시적으로 Promise.all 등을 사용하지 않으면, 여러 fetch가 직렬로 일어나 로딩이 느려지는 문제가 있었습니다.
다중 로딩 상태: 여러 컴포넌트가 각자 비동기 처리를 하면, 각각 개별로 로딩 스피너를 관리해야 했습니다. 예를 들어 페이지의 부모 컴포넌트와 자식 컴포넌트가 각각 데이터를 가져온다면, 화면에 두 개 이상의 로딩 UI(“스피너”)가 나타나거나 데이터 도착 시점이 달라 UI가 순차적으로 덜그럭거리는 현상이 발생했습니다. 이를 해소하려면 데이터를 한 곳에서 모두 불러오고 하위에 props로 내려주는 prop-drilling이 필요했지만, 이런 패턴은 코드 구조를 경직되게 만들었습니다.
위 문제들을 실제 사례로 생각해보면, 블로그 게시글 페이지를 구현할 때를 떠올릴 수 있습니다. SvelteKit에서는 게시글 내용과 댓글 목록을 불러오기 위해 아래와 같이 작성해야 했습니다:
// +page.ts - 기존 SvelteKit 방식
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ fetch, params }) => {
const postRes = await fetch(`/api/posts/${params.id}`);
const commentsRes = await fetch(`/api/posts/${params.id}/comments`);
return {
post: await postRes.json(),
comments: await commentsRes.json()
};
};<!-- +page.svelte -->
<script>
export let data; // load 함수로부터 전달된 데이터
const { post, comments } = data;
</script>
<h1>{post.title}</h1>
<p>{post.content}</p>
<CommentsList {comments} />이 방식은 SSR로 초기에 post와 comments를 모두 받아와 첫 화면에 렌더링해주는 장점이 있지만, 개발자는 모든 관련 데이터를 한 곳에서 미리 로드해야 합니다. 만약 CommentsList 컴포넌트 내부에서 자체적으로 데이터를 가져오도록 만들면, SSR 이점이 사라지고 로딩 UI를 둘 다 관리해야 했습니다.
기존 방식의 불편함: 위 코드에서 볼 수 있듯, load 함수에 여러 fetch를 나열하면 기본적으로 순차 실행되기 때문에 첫 fetch가 끝나야 두 번째 fetch가 이루어집니다. 개발자가 의식적으로 Promise.all을 적용하지 않는 한, 병렬로 데이터를 불러오지 못해 지연이 발생합니다. 또한 모든 데이터를 load에서 처리하다 보면 사용하지 않는 데이터까지 불필요하게 로드하거나( props로 내려받고도 실제로는 안 쓰이는 경우) 나중에 코드 정리 시 어떤 데이터가 쓰이는지 한눈에 파악하기 어려워 “필요 없는 로직이 남아있는” 문제가 생기기도 합니다.
위와 같은 이유로, SvelteKit의 기존 비동기 전략은 개발 편의성 측면에서 한계를 보여왔습니다. 이제, Svelte 5에서는 이러한 문제들을 어떻게 해결하는지 개선 사항별로 살펴보겠습니다.
Svelte 5에서는 컴포넌트의 <script> 영역에서 바로 await를 사용할 수 있게 되었습니다. 다시 말해, 컴포넌트 자체를 async 함수처럼 다뤄 비동기 데이터를 직접 가져올 수 있습니다. 이는 “최소한의 세레모니(minimal ceremony)” 원칙에 부합하며, 프레임워크 전용 API 없이도 그냥 JavaScript 코드 작성하듯 사용할 수 있는 기능입니다. 개발자는 더 이상 페이지별 load 함수나 onMount에 의존하지 않고, 필요한 곳에서 곧바로 데이터를 fetch할 수 있게 되었습니다.
예를 들어 앞서 언급한 블로그 게시글 페이지를 Svelte 5 방식으로 바꿔보면 다음과 같습니다:
<!-- Svelte 5: 페이지 컴포넌트 내에서 직접 await -->
<script>
import CommentsList from './CommentsList.svelte';
export let id; // 페이지 라우터로부터 전달된 게시글 ID
const postRes = fetch(`/api/posts/${id}`);
const commentsRes = fetch(`/api/posts/${id}/comments`);
// 병렬로 fetch 요청을 시작한 후 각 결과를 기다림
const post = await postRes.then(r => r.json());
const comments = await commentsRes.then(r => r.json());
</script>
<h1>{post.title}</h1>
<p>{post.content}</p>
<CommentsList {comments} />위 코드에서 보듯이, 컴포넌트 스크립트 최상위에서 await를 사용하여 데이터를 가져왔습니다. Svelte 5 컴파일러는 이러한 코드를 처리하기 위해 컴포넌트를 비동기로 렌더링하는 메커니즘을 제공하며, 개발자는 마치 동기 코드를 짜듯이 작성하면 됩니다. 과거 방식과 비교한 개선점은 다음과 같습니다:
단일 파일에 로직 집중: load 함수 파일이 아예 필요 없어지거나 최소화됩니다. UI 구성과 데이터 요청 로직이 한곳에 있으므로 코드 가독성이 높아지고 관리가 수월합니다.
라우터 종속성 탈피: 컴포넌트 내부에서 자유롭게 데이터를 불러올 수 있으므로, 굳이 페이지 단위가 아니어도 어떤 컴포넌트든 자체적으로 비동기 데이터를 처리할 수 있습니다. 예컨대, <CommentsList> 컴포넌트도 필요하다면 자체적으로 await fetch(...)를 사용해 데이터를 가져올 수 있습니다 (기존엔 페이지 load에서 받아 props로 넘기거나, 내부 onMount에서 처리해야 했음).
타입 처리 단순화: const post = await fetch().then(r=>r.json())와 같이 사용하면 post의 타입은 일반적인 TS 추론에 의해 결정됩니다. 별도의 PageData 인터페이스를 신경 쓰지 않아도 되고, fetch 응답에 제네릭 타입을 지정하는 등 익숙한 TypeScript 방식으로 타입을 다룰 수 있습니다. 결과적으로 개발자가 SvelteKit 전용 타입 생성 규칙을 학습하거나 복잡한 제네릭 선언을 고민하는 시간을 줄여줍니다.
코드 양 감소: 불필요한 보일러플레이트가 사라집니다. load 함수의 context 객체에서 fetch나 params를 추출하고, 일일이 반환 객체를 구성하는 코드 대신, 필요한 데이터를 곧바로 변수에 할당해 사용할 수 있습니다. Rich Harris도 Svelte 5에 대해 “여러분은 더 적은 코드를 작성하게 될 것”이라고 언급했는데, 이러한 간소화된 데이터 로딩 방식이 그 한 예입니다.
요약하면, 컴포넌트 내부 await 지원으로 개발자는 원하는 데이터를 원하는 시점에 가져오는 로직을 직관적으로 작성할 수 있으며, SvelteKit의 라우팅이나 규칙에 덜 얽매이게 됩니다. 이는 곧 유지보수 편의와 개발 생산성의 향상으로 이어집니다.
참고: 현재 Svelte 5에서는 컴포넌트 최상위 await 기능이 실험적으로 도입되고
있으며,<svelte:boundary>라는 특별한 컴포넌트(https://svelte.dev/docs#svelte_boundary)로 비동기 영역을 감싸 **로딩 중 표시할 UI (pending snippet)**을 지정할 수 있습니다. 예를 들어, 위 컴포넌트를<svelte:boundary pending={<p>로딩중...</p>}> ... </svelte:boundary>로 감싸면 데이터가 모두 준비되기 전까지는 “로딩중…” 문구만 표시하고, 준비 완료 시 내부를 한꺼번에 렌더링할 수 있습니다. 이처럼 Svelte 5는 기존{#await ... then ...}블록 없이도 손쉽게 로딩 상태를 표시할 수 있는 방법을 제공합니다.
Svelte 5의 비동기 처리 철학 중 핵심은 **“자동 조율(automatic coordination)”**입니다. 이는 비동기 작업과 상태 변화를 프레임워크가 알아서 동기화하여 처리한다는 의미로, 개발자가 수동으로 UI 상태를 관리하느라 복잡한 코드를 작성할 필요가 크게 줄어듭니다. 구체적으로, 어떤 비동기 작업이 완료될 때까지 관련된 UI 업데이트를 보류함으로써, 사용자에게 일관된 화면 전환을 제공할 수 있게 됩니다.
실전 시나리오로, 게시글 상세 페이지에서 게시글 내용을 표시하면서 사용자 댓글을 로딩하는 상황을 다시 생각해보겠습니다. 기존 SvelteKit 방식이라면 부모 컴포넌트가 게시글을 표시한 뒤, 자식 <CommentsList> 컴포넌트가 onMount에서 댓글을 fetch하여 로딩이 끝나면 목록을 렌더링했습니다. 이 경우 사용자는 초기에 게시글은 보이지만 댓글 위치에는 로딩 스피너가 돌고 있는 화면을 보게 됩니다. 댓글 데이터 도착 후에야 목록이 나타나죠. 부모와 자식이 각자 로딩 상태를 관리하기 때문에 생기는 흔한 UX 패턴입니다. 혹은 앞서처럼 모든 데이터를 한 번에 가져오는 경우엔 두 데이터 중 느린 쪽 때문에 전체가 지연되거나, 반대로 SSR로 한꺼번에 그려졌다면 개발 편의가 희생되었습니다.
Svelte 5의 자동 동기화 렌더링을 활용하면, 부모와 자식 컴포넌트의 비동기 작업을 프레임워크가 알아서 병렬로 처리하고, 결과를 모아서 한꺼번에 화면에 반영합니다. 예를 들어 Svelte 5에서는 다음과 같은 흐름이 가능합니다:
부모 컴포넌트가 post 데이터를 await으로 가져오고, 동시에 자식에 넘길 commentsPromise도 생성(fetch 호출)합니다. 이 때 두 개의 fetch는 병렬로 진행되며, 부모는 post가 준비될 때까지, 자식은 comments가 준비될 때까지 각각 대기합니다.
컴포넌트들이 <svelte:boundary>로 감싸져 있다면, 모든 비동기 작업이 완료되기 전까지 기존 화면을 유지하거나 공통 로딩 UI만 표시합니다. 비동기 처리 완료 시점에 부모-자식 컴포넌트 모두 동시에 최신 데이터로 렌더링되므로, 중간에 어설픈 빈 화면이나 여러 개의 스피너가 나타나지 않습니다.
만약 비동기 대기 중에 다른 상태가 변경되었다면(예: 사용자가 화면상의 다른 인터랙션을 함), 해당 부분은 즉시 업데이트하되, 비동기 작업 결과와 충돌하지 않도록 처리가 이루어집니다. 즉, 기다릴 건 기다리면서도, 기다릴 필요 없는 변화는 실시간 반영하는 똑똑한 동작을 합니다.
결과적으로, Svelte 5에서는 개발자가 별도로 신경 쓰지 않아도 비동기 데이터 로딩으로 인한 UI 불안정이 크게 줄어듭니다. 사용자 입장에서는 모든 데이터가 준비되어 일관된 완성형 화면을 보거나, 최소한 한 번에 전환되는 화면을 보게 되어 경험이 향상됩니다. 개발자 입장에서는 과거에 “어떤 시점에 어떤 로딩 표시를 끄고 켤지”, “부모-자식 간 데이터 로딩 순서를 어떻게 맞출지” 등의 고민을 일일이 코드로 풀어내던 부담이 사라집니다. Svelte 컴파일러와 런타임이 이러한 조율을 맡아주므로, 우리는 핵심 로직에 집중할 수 있습니다.
예를 들어, Svelte 5의 자동 동기화 렌더링 덕분에 아래와 같은 비교가 가능합니다:
| 시나리오 | 기존 SvelteKit (Svelte 4) | Svelte 5 방식 |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|
| 게시글 + 댓글 동시 로드 | - SSR load 함수에서 두 데이터를 모두 fetch
- 부모 먼저 렌더 후 자식 영역에 로딩 스피너 표시
- 자식 데이터 도착 시 교체 | - 부모에서 post await, 자식에서 comments await (병렬 처리)
- <svelte:boundary>로 공통 로딩 UI 표시
- 완료 시 동시에 렌더링 |
| 중간 상태 노출 | - 게시글만 먼저, 댓글은 비어있는 화면 등 중간 상태 노출 | - 완전한 화면만 노출 또는 로딩 UI만 표시 |
| 로딩 UI 개수 | - 부모/자식 각각 스피너 관리 필요 | - 하나의 <svelte:boundary>로 통합 가능 |
위 비교처럼, Svelte 5의 자동 동기화 렌더링은 개발자에게는 단순한 코드로 우수한 UX를 구현하게 해주고, 사용자는 더 매끄러운 화면 전환을 경험하도록 해줍니다. Rich Harris는 이러한 접근에 대해, React나 Vue 등이 도입한 Suspense와 유사한 개념들을 언급하면서도, Svelte는 컴파일러 주도 설계를 통해 더 나은 ergonomics와 적은 단점으로 컴포넌트 수준 비동기를 제공할 수 있다고 자신했습니다.
Svelte 5에서는 비동기 처리와 반응성 면에서 성능 최적화가 자동으로 내장되어 있습니다. 두 가지 키워드는 **“병렬 by default”**와 **“fine-grained reactivity(세분화된 반응성)”**입니다.
Svelte 5 이전에는 개발자가 의식적으로 비동기 호출을 병렬로 실행하도록 코딩하지 않으면, 자바스크립트의 await는 순차 실행을 야기했습니다. 예를 들어 onMount 안에서 await fetchA(); await fetchB();를 하면 B는 A가 끝난 후에야 실행됐습니다. Svelte 5는 이러한 부분까지도 컴파일 단계에서 최적화하여, 기본적으로 병렬로 실행되도록 바꾸었습니다. 예컨대 Svelte 5 컴파일러는 위 코드를 내부적으로 다음과 같이 변환할 수 있습니다:
// Svelte 5 컴파일러가 내부적으로 처리하는 방식 (예시)
const _p1 = fetchA();
const _p2 = fetchB();
const [resultA, resultB] = await Promise.all([_p1, _p2]);즉, 개발자가 순차적으로 await을 썼어도 실제로는 두 fetch가 동시에 진행되도록 만드는 것입니다. 이런 **“자동 병렬화”**는 Svelte 5의 비동기 처리 설계 요구사항 중 하나로 명시되어 있습니다 (“template 내 표현식들은 순수(pure)하다고 가정할 수 있으므로, 순차적인 await들이 꼭 순차적인 작업을 의미하지 않게 최적화할 수 있다”). 마찬가지로, 여러 형제 컴포넌트의 비동기 작업도 자동으로 병렬 수행됩니다. 이는 개발자가 병렬 처리를 위해 별도로 코드를 짜거나 리팩터링하지 않아도 최적의 로딩 속도를 얻을 수 있다는 뜻입니다. 결과적으로 전체적인 앱 반응 속도 향상과 함께, 느린 네트워크 환경에서도 불필요한 지연을 최소화해줍니다.
Svelte는 원래도 변화가 발생한 부분만 DOM을 업데이트하는 효율적인 반응성으로 유명합니다. Svelte 5에서는 한 걸음 더 나아가 반응성의 추적 단위를 더욱 세밀하게 만들었습니다. 새로운 룬(rune) 기반 상태 관리($state, $derived 등) 도입으로, 객체의 프로퍼티 단위까지 추적하여 변경된 부분만 재평가 및 재렌더할 수 있게 되었습니다. 이를테면 Svelte 4까지는 객체 obj 전체를 교체하거나 스토어 API를 사용해야 내부 프로퍼티 변경을 반응형으로 처리할 수 있었지만, Svelte 5에서는 obj.someProp = newValue만으로 해당 프로퍼티를 사용하는 UI만 갱신하는 식입니다. Rich Harris는 이를 두고 Svelte 5의 컴파일러가 **“언어 차원의 세밀한 제어와 효율적인 상태 업데이트”**를 가능케 했다고 설명합니다.
이 fine-grained reactivity는 앞서 언급된 “coarse-grained invalidation(광범위한 무효화)” 문제를 해결합니다. 기존 SvelteKit load 방식에서는 페이지-level로 데이터를 모두 묶어두었기 때문에, 작은 변경에도 전체 load 결과가 무효화되고 다시 계산되는 일이 벌어졌습니다. 하지만 Svelte 5에서는 각 await이나 각 반응성 상태가 독립적으로 추적되어 필요할 때만 갱신됩니다. 예를 들어, 사용자가 현재 보고 있는 게시글 목록에서 한 항목의 “좋아요” 수만 증가해도, 과거에는 전체 목록 데이터를 새로 고쳐야 하거나 개발자가 수동 최적화해야 했지만, 이제는 해당 항목의 좋아요 숫자 부분만 업데이트되는 식입니다. 이는 DOM 업데이트 및 연산량을 크게 줄여 성능을 향상시키고, 개발자가 불필요한 최적화 코드를 작성하지 않아도 효율적인 동작을 얻을 수 있게 합니다.
또한 Svelte 5의 반응성 개선은 개발자 경험도 높여줍니다. 예컨대, $state로 선언된 상태는 컴포넌트의 지역 상태와 Svelte 스토어의 개념을 통합한 것이라 볼 수 있는데, 덕분에 기존 SvelteKit에서 전역 상태 관리를 위해 스토어를 남발하거나, 또는 지역 상태를 유지하려고 복잡하게 코딩하던 부분들이 단순해질 것으로 기대됩니다. 정리하면, Svelte 5의 세분화된 반응성은 성능과 DX(개발자 경험) 두 마리 토끼를 잡는 변화입니다.
마지막으로, 앞서 살펴본 개선 사항들을 중심으로 기존 SvelteKit 방식과 Svelte 5 방식을 비교하여 요약합니다:
| 개선 요소 | 기존 SvelteKit (Svelte 3/4) | Svelte 5 |
|--------------------|-------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
| 데이터 로딩 방식 | 페이지 전용 load 함수에서 데이터 fetch → 컴포넌트에 props로 주입. 또는 컴포넌트 onMount/{#await} 블록 내부에서 처리 (SSR 미지원). | 컴포넌트 <script> 상단에서 곧바로 await 사용 가능. 프레임워크 API 없이 일반 변수 할당하듯 데이터 로드. |
| 라우팅 의존성 | 데이터 로직이 라우터에 묶여 있어 컴포넌트 재사용 어려움. (페이지 아닌 컴포넌트는 자체 로딩 시 SSR 혜택 포기해야 함) | 라우터 종속성 감소 – 어떤 컴포넌트에서도 필요하면 await fetch 사용. 페이지/레이아웃 구분 없이 동일한 패턴 활용. |
| 타입 및 보일러플레이트 | SvelteKit이 생성하는 PageData 타입 따라 별도 정의 필요. load 결과를 구조분해해서 props로 받아오는 등 반복 코드 발생. | 일반적인 TS 타입 추론 사용. 코드 한 곳에서 처리하므로 보일러플레이트 감소. 타입 안전성도 자연스럽게 확보. |
| 비동기 실행 방식 | 기본적으로 await 호출은 순차 처리됨. (병렬로 처리하려면 개발자가 명시적 고려 필요) | 기본 병렬 처리 – 순차 await도 내부적으로 동시 실행 최적화. 여러 컴포넌트의 fetch도 병렬 진행 (네트워크 지연 단축). |
| 로딩 중 UI | 여러 spinners/플레이스홀더가 제각각 나타날 수 있음. (개발자가 수동으로 조합해야 일관된 로딩 화면 가능) | <svelte:boundary>로 로딩 화면 일원화 가능. 자동 동기화 렌더링으로 중간 불완전 상태를 사용자에게 보여주지 않음. |
| 반응성/업데이트 범위 | load 무효화 시 전체 페이지 데이터 갱신 (coarse-grained). 컴포넌트 지역 상태도 객체일 경우 전체 교체 필요. | fine-grained reactivity로 변경된 부분만 업데이트. 불필요한 재연산 감소, 더 나은 성능과 부드러운 UX. |
위 표에서 볼 수 있듯이, Svelte 5는 기존의 단점을 면밀히 보완하여 개발자에게는 단순하고 즐거운 코딩 경험을, 사용자에게는 더 나은 성능과 UX를 제공하는 방향으로 나아가고 있습니다. 실제 Rich Harris도 Svelte 5에 대해 “모든 면에서 더 나아진(just better in every way)” 프레임워크라고 강조했는데, 이는 단순한 홍보 문구가 아니라 앞서 살펴본 이러한 실질적 개선들이 뒷받침하는 자신감일 것입니다.
마지막으로, 이러한 변화는 SvelteKit에도 큰 영향을 미칩니다. Svelte 팀은 기존 load 함수 등의 primitives에서 점차 벗어나겠다는 계획을 내비쳤으며, Svelte 5와 함께 보다 직관적인 데이터 페칭 패턴들이 등장할 것으로 보입니다. 요약하자면, Svelte 5의 비동기 처리 개선은 과거 SvelteKit 개발이 안고 있던 불편함을 해소함으로써, 개발자는 적은 코드로 더 많은 것을 할 수 있고 사용자 경험도 향상되는 윈윈(win-win)을 이루게 되었습니다. 앞으로 Svelte 5를 활용한 개발에서는 복잡했던 비동기 로직에 할애하는 시간이 줄어들고, 애플리케이션의 본연의 로직과 기능 구현에 더욱 집중할 수 있을 것입니다.
참고 문헌: Rich Harris, “What Svelte Promises”, Svelte Summit 2024; Svelte 공식 블로그 및 RFC 문서 (Asynchronous Svelte 논의) 등.