await svelte

await Svelte 설정

Svelte에서는 기존에 {#await} 블록이나 onMount 내부의 async/await를 통해 비동기 처리를 해왔습니다. 하지만 최근에는 Svelte 컴포넌트 자체 내에서 await를 더 유연하게 사용할 수 있도록 확장하려고 하고 있습니다.

SvelteKit에서는 load 함수 (+page.ts, +page.server.ts)를 통해 데이터를 로드하지만, Svelte 자체에서는 컴포넌트 내에서의 비동기 처리 방식이 제한적이었습니다.

React의 Server Component 접근 방식과 유사하게 컴포넌트 내에서 직접 await를 사용할 수 있는 방향으로 보입니다.

<h1>Weather forecast for {city}</h1>
<p>{await getWeatherForecast(city)}</p>

$derived 에서의 사용

<script>
	import { MediaQuery } from 'svelte/reactivity';

	const large = new MediaQuery('min-width: 800px');

	const module = $derived(
		large.current
			? await import('./large.svelte')
			: await import('./small.svelte')
	);


	let aPromise = $derived(foo(x));
	let bPromise = $derived(bar(x));

	let a = $derived(await aPromise);
	let b = $derived(await bPromise);


	let artist = $derived(await search(query));
	let tracks = $derived(await getTrackListing(artist.id));


</script>

<module.default />

마크업에서의 사용

<li>apples {await getPrice('apple')} each</li>
<li>bananas {await getPrice('banana')} each</li>
<li>canteloupes {await getPrice('canteloupe')} each</li>

svelte:boundary 에서의 사용

App.svelte

<script lang="ts">
	import { delayed } from './utils.js';
	
	let count = $state(0);
</script>

<svelte:boundary>
	<button onclick={() => count += 1}>increment</button>
	<p>{count} * 2 = {await delayed(count * 2)}</p>
	
	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>

<ul>
	<svelte:bondary>
		<li>apples {await getPrice('apple')} each</li>
		<li>bananas {await getPrice('banana')} each</li>

      {#snippet failed(error, reset)}
          whoops, apples or bananas failed.
      {/snippet}
	</svelte:boundary>
	<li>canteloupes {await getPrice('canteloupe')} each</li>
</ul>

utils.js

export function delayed(value, ms = 500) {
	return new Promise((f) => {
		setTimeout(() => f(value), ms);
	});
}

출처
https://github.com/sveltejs/svelte/discussions/15845
https://youtu.be/nQB9iRijqBY
https://svelte.dev/playground/767e0bfd75614664a41ba73f28cc424c?version=pr-15844

잘못된 부분이나 수정할 점이 있다면 언제든지 알려주세요. 감사합니다!