Svelte 5 Patterns (Part 3): Async + Remote

Context Update (2025-10-03): I ran into SSR issues with Astro and the Cloudflare adapter (for deploying to Cloudflare Workers). See my thread on Bluesky (incl. a workaround). After fixing I restored parts of the async Svelte + Astro Lab and the Server Island at the bottom of this post. Not a full-blown blog post (at least for now) because I lack the time, and both APIs are fairly new and behind experimental flags - BUT: ~Today~ I took some time to explore the surface of the new-ish Svelte async pattern - and what should I say - I'm fully hooked! Bluesky post Updates Update (2025-09-29): Astro findings moved to dedicated section below Update (2025-09-25): In other Svelte / Vite ecosystem news, Storybook for Svelte also just released support for Svelte Async (and a rewritten intro / tutorial for Svelte 5 CSF) Bluesky post New Svelte Async Patterns After struggeling a bit I explored different combinations of the syntax in SvelteKit and added a set of working examples to my playground: https://lab.fubits.dev/async TL;DR: the new await keyword was introduced in svelte@5.36.0 before svelte@5.39.0 the new await keyword was client-only dependent on a parent with a {#snippet pending()} in lab.fubits.dev/async/simple-1 to lab.fubits.dev/async/simple-3 you'll find different parent-child patterns that apply to both plain Svelte as well as SvelteKit (REPLs included) with svelte@5.39.0 the await keyword was enabled for SSR and the boundary requirement was dropped see the most minimal, SSR'ed example in lab.fubits.dev/async/final note: I still think that using the is a good idea - and {#snippet pending()} is a nice shortcut to off-the-shelf loading UX (like skeletons, spinners, etc.) with svelte@5.39.5, await became fully functional in {@html await fn()} / {await fn()} markup expressions and in {#snippet} / {@render snippet()}! for a mind-blowing example see lab.fubits.dev/async/bonus Screenshot of the linked Svelte 5 Async + Remote functions snippet async + remote function in a snippet - from lab.fubits.dev/async/bonus with SvelteKit defaults, both the final and the bonus examples are SSR'ed / prerendered Note, that this is merely the surface of the new async + remote patterns! both APIs are still behind experimental flags - for a reason Check the docs for more details: Svelte await documentation: https://svelte.dev/docs/svelte/await-expressions SvelteKit Remote Functions documentation: https://svelte.dev/docs/kit/remote-functions That's it for now for Svelte / SvelteKit. Exploring more advanced patterns of await and of remote functions comes next. For async Svelte in Astro see the next section. Until then, watch Simon Holthausen's Introduction to Remote Functions ~(part 2 will be released very soon)~ YouTube video or check how to stay up-to-date in Svelte! Update: Simon's second part of the Remote Functions series is out now: YouTube video Async Svelte in Astro moved Astro-related updates from above to here Client-Side

Turns out that async Svelte does work in Astro Islands as well! This very post is mdx in a content collection!

import SvelteAsyncStandalone from '@components/SvelteAsyncStandalone.svelte'; ▶ Interactive feature — view on fubits.dev SSR / Server-Side I shared an early version of this note on Bluesky, Rich Harris asked if SSR also works in Astro, and less than 24h hours later Astro released support for server-side rendering of async Svelte thanks to Matt Kane! Bluesky post After several iterations, I've listed some robust examples in my /lab. So it looks like we can now use Astro's Server Islands with async Svelte 5 (incl. SSR) and have something like partially or fully (!see below)prerendered Svelte component in any place in Astro. Update (2025-09-25): Async Svelte in Astro has been officially released in Astro 5.14.

The weather widget below is the result of:

// AstroServerIslandWeatherIdle.astro import SvelteAsyncWeather from '@components/SvelteAsyncWeather.svelte'; const { city } = Astro.props // index.mdx import AstroServerIsland from '@server/AstroServerIsland.astro'; ▶ Interactive feature — view on fubits.dev Incredible! Find a simpler example with syntax here: /lab/svelte-async-server-island Server-Side... Update (2025-09-29): turns out that you can use async Svelte as prerendered server-side component in Astro by ommitting the client:* directive on the Client Island and dropping the svelte:boundary in the Svelte component. But there's more ... I was tipped off to a developer on Mastodon looking for help with async Svelte in Astro. At some point in the conversation I was quite confused because they wanted to a) use async Svelte "server only" and b) use Astro's Content Collection API in Svelte. I claimed that this wouldn't work and I was wrong... Look here: /lab/astrokit. Reload the page. Check the network tab. Inspect the HTML. This is a simple Svelte component fetching, awaiting and rendering an Astro Content Collection entry with getEntry() from astro:content. Again, you need to ommit the client:* directive on the Client Island and drop the svelte:boundary in the Svelte component. Other than that, everything else works as expected. You can even wrap the same content-fetching Svelte component in an Astro Server Island (which obviously defeats the static prerendering) - but I bet there is a use case for this! Update (2025-10-03) After trying to track down a SSR bug (when deploying to Cloudflare Workers) for more than 3 days I finally achieved my goal of async Svelte in Astro: server-side rendered, client-side hydrated interaction with data from a DB (and an API): /how-much-is! Update (2025-10-04): This unlocked a pattern previously unimaginable to me (in action here - "Svelte Ecosystem News"): Bluesky post