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!

Ilja @fubits.dev

Finally had time to look into async Svelte in more depth. Took me a bit to understand the examples in the docs, so I wrote boilerplate code for myself and thought it'd be helpful to others. Here's my exploration for v1 - client-side async: lab.fubits.dev/async REPLs are linked in the examples 🫡

lab.fubits.dev

this is an exploration of "v1" of async Svelte (as in: client-side only and before svelte@5.39.0 which introduced experimental async SSR)

September 23, 2025 at 4:04 PM UTC

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)

Jeppe Reinhold 🇩🇰 @reinhold.is

In the next version of Storybook 1. Async Svelte components are supported 2. Mocking SvelteKit's $app/state module is (finally) supported

github.com

Release v10.0.0-beta.7 · storybookjs/storybook

10.0.0-beta.7 Addon A11y: Prevent setting highlights for old results - #32178, thanks @ghengeveld! AddonViewport: Stricter types - #32324, thanks @hpohlmeyer! CSF: Add Storybook test syntax (Story...

Jeppe Reinhold 🇩🇰@reinhold.is

Lately I've been seeing some great PRs from the community improving Storybook's Svelte integration. ❤️ Hoping to land them this week. 🤞

media.tenor.com

September 25, 2025 at 9:26 AM UTC

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 <svelte:boundary /> 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 <svelte:boundary /> 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
  
  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)~~ Play or check how to stay up-to-date in Svelte!

Update: Simon’s second part of the Remote Functions series is out now: Play

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';

<SvelteAsyncStandalone client:visible={"svelte"} />

snippet pending

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!

Ilja @fubits.dev

Astro 🤝 Svelte

Matt Kane@mk.gg

That was easy!

github.com

September 24, 2025 at 9:24 AM UTC

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
---

<SvelteAsyncWeather city={city} client:idle />

// index.mdx
import AstroServerIsland from '@server/AstroServerIsland.astro';
<AstroServerIsland server:defer city='Tokyo' />

This is an async Svelte component served as an Astro Server Island! It even accepts props from Astro! Look in the network tab.

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”):

Ilja @fubits.dev

Ok I figured out a thing and I can’t believe that it works… Server-side DB fetch in a @astro.build Server Island with 0 JS & no Svelte. Rendered in a prerendered mdx blogpost in a Astro content collection. import News from „@components/News.astro“; <News server:defer /> fubits.dev/notes/how-to...

fubits.dev

How to Stay Up to Date in Svelte - Notes - @fubits

How to Stay Up to Date in Svelte - @fubits' Notes on Web Development, Design & Data Visualization

October 4, 2025 at 12:33 AM UTC

Back to all Notes