데브허브 | DEVHUB | Async Svelte is Coming Soon (and Server Components!?)Async Svelte is Coming Soon (and Server Components!?)
- Svelte에 실험적인 비동기 브랜치가 도입되어
await 키워드를 컴포넌트 내에서 직접 사용할 수 있게 됩니다. 🚀
- 기존 Svelte의 데이터 페칭 방식(onMount, await 블록, SvelteKit load 함수)이 가진 개별 스피너, 깜빡임, prop drilling 등의 문제점을 해결합니다. 🛠️
- 새로운 비동기 기능은 컴포넌트의 스크립트 블록 최상단, 파생 표현식, 템플릿 표현식 등 세 곳에서
await 사용을 지원합니다. 🎯
await를 사용하는 모든 서스펜딩 표현식은 'Svelte 바운더리' 내에 있어야 하며, 이 바운더리는 초기 로딩 폴백(pending)을 제공합니다. 🚧
- 이미지 사전 로딩, 컴포넌트 지연 로딩, 웹 워커를 통한 CPU 집약적 작업 오프로딩 등 다양한 활용 가능성을 제시합니다. 💡
- Svelte는 가능한 한 많은 비동기 작업을 병렬로 처리하여 성능을 최적화하고, UI의 모든 부분이 동일한 상태를 읽을 때 함께 일시 중지되도록 보장합니다. ⚡
- 사용자 경험을 위해 포커스된 입력 필드가 비동기 작업으로 인해 지연되지 않도록 나머지 UI가 입력에 맞춰 업데이트됩니다. 🧘
- 궁극적으로 비동기 서버 사이드 렌더링(SSR), SvelteKit의 포킹(speculative navigation), 그리고 Svelte 서버 컴포넌트 도입의 기반이 될 것으로 예상됩니다. 🌐
- 이 기능은 여전히 일반 JavaScript를 사용하며 Svelte 컴파일러가 나머지를 처리하여 개발 복잡성을 낮추는 것을 목표로 합니다. ✨
- 현재 실험 단계이며 프로덕션 준비가 되지 않았지만, Svelte 6에서 정식으로 도입될 가능성이 높습니다. 🧪