Svelte 5 Patterns (Part 3): Async + Remote

Demos with code snippets / REPLs included

Sep 23, 2025 · 5 min read

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 <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)~~ 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!

```js import SvelteAsyncStandalone from '@components/SvelteAsyncStandalone.svelte';


---

> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/svelte-5-patterns-async-remote/)

---

### SSR / Server-Side

I shared an early version of this note on Bluesky, [Rich Harris asked if SSR also works](https://bsky.app/profile/rich-harris.dev/post/3lzjyxexjzs26) in Astro, and less than 24h hours later Astro released support for **server-side rendering of async Svelte** thanks to [Matt Kane](https://github.com/withastro/astro/pull/14430)!

[Bluesky post](https://bsky.app/profile/fubits.dev/post/3lzl4jpgaek2m)

After several iterations, I've listed some robust examples in my [/lab](/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](https://astro.build/blog/astro-5140/#async-rendering-support-for-svelte).

<blockquote>
<p>The weather widget below is the result of:</p>
</blockquote>
```js
// AstroServerIslandWeatherIdle.astro
---
import SvelteAsyncWeather from '@components/SvelteAsyncWeather.svelte';

const { city } = Astro.props
---

<SvelteAsyncWeather city={city} client:idle />
``````js
// index.mdx
import AstroServerIsland from '@server/AstroServerIsland.astro';
<AstroServerIsland server:defer city='Tokyo' />
```<p>This is an async Svelte component served as an Astro <strong>[Server Island](https://docs.astro.build/en/guides/server-islands/)</strong>! It even accepts props from Astro! Look in the network tab.</p>

---

> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/svelte-5-patterns-async-remote/)

---

**Incredible!**

Find a simpler example with syntax here: <a href="/lab/svelte-async-server-island/" data-astro-prefetch="false">/lab/svelte-async-server-island</a>

### 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](https://mastodon.online/deck/@snugug@mas.to/115278274158792500) 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: <a href="/lab/astrokit/" >/lab/astrokit</a>. 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](/lab/astrokit-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](/how-much-is/)!

**Update (2025-10-04):**

This unlocked a pattern previously unimaginable to me (in action [here](/notes/how-to-stay-up-to-date-in-svelte/#svelte-ecosystem-news) - *"Svelte Ecosystem News"*):

[Bluesky post](https://bsky.app/profile/did:plc:6aglx53tojyuwxwueap5og3h/post/3m2ddignygk2y)

Did you enjoy this article?

Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.

fubits.dev @fubits.dev