{
"$type": "site.standard.document",
"content": {
"$type": "at.markpub.markdown",
"flavor": "gfm",
"renderingRules": "markdown-it",
"text": {
"$type": "at.markpub.text",
"markdown": "## Context\n\n> **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](https://bsky.app/profile/fubits.dev/post/3m2cqbxjcvs2g) (incl. a workaround). After fixing I restored parts of the [async Svelte + Astro Lab](/lab/) and the Server Island at the bottom of this post.\n\nNot 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:\n\n~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!\n\n[Bluesky post](https://bsky.app/profile/fubits.dev/post/3lzjcgcurrk2p)\n\n## Updates\n\n**Update (2025-09-29):**\n\n> Astro findings moved to [dedicated section below](#async-svelte-in-astro)\n\n**Update (2025-09-25):**\n\nIn other Svelte / Vite ecosystem news, **Storybook for Svelte** also just released support for Svelte Async (and [a rewritten intro / tutorial for Svelte 5 CSF](https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/get-started/))\n\n[Bluesky post](https://bsky.app/profile/reinhold.is/post/3lznn4fajfc2n)\n\n## New Svelte Async Patterns\n\nAfter 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\n\n**TL;DR:**\n\n- the new `await` keyword was introduced in `svelte@5.36.0`\n- before `svelte@5.39.0` the new `await` keyword was\n\t- client-only\n\t- dependent on a parent `<svelte:boundary />` with a `{#snippet pending()}`\n\t- in [lab.fubits.dev/async/simple-1](https://lab.fubits.dev/async/simple-1) to [lab.fubits.dev/async/simple-3](https://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)\n- with `svelte@5.39.0`\n\t- the `await` keyword was enabled for SSR\n\t- and the `boundary` requirement was dropped\n\t- see the most minimal, SSR'ed example in [lab.fubits.dev/async/final](https://lab.fubits.dev/async/final)\n - *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.)\n- with `svelte@5.39.5`, `await` became fully functional in `{@html await fn()}` / `{await fn()}` markup expressions **and** in `{#snippet}` / `{@render snippet()}`!\n\t- for a mind-blowing example see [lab.fubits.dev/async/bonus](https://lab.fubits.dev/async/bonus) \n\n*async + remote function in a snippet - from <a href='https://lab.fubits.dev/async/bonus'>lab.fubits.dev/async/bonus</a>*\n- with SvelteKit defaults, both the final and the bonus examples are SSR'ed / prerendered\n\nNote, that \n- this is merely the surface of the new async + remote patterns!\n- both APIs are still behind experimental flags - for a reason\n\nCheck the docs for more details:\n- Svelte `await` **documentation**: [https://svelte.dev/docs/svelte/await-expressions](https://svelte.dev/docs/svelte/await-expressions)\n- SvelteKit Remote Functions **documentation**: [https://svelte.dev/docs/kit/remote-functions](https://svelte.dev/docs/kit/remote-functions)\n\n> That's it for now for Svelte / SvelteKit. Exploring more advanced patterns of `await` and of `remote functions` comes next. \n> For async Svelte in Astro see [the next section](#async-svelte-in-astro).\n\n> Until then, watch Simon Holthausen's Introduction to Remote Functions ~(part 2 will be released very soon)~ [YouTube video](https://youtu.be/0hy7PCbXyqs) or check [how to stay up-to-date in Svelte](/notes/how-to-stay-up-to-date-in-svelte/#updates)!\n\n> **Update**: Simon's second part of the Remote Functions series is out now: [YouTube video](https://youtu.be/z0f7NLPdLYE)\n\n## Async Svelte in Astro\n\n> moved Astro-related updates from above to here\n\n### Client-Side\n\n<blockquote><p>Turns out that `async Svelte` **does work** in **Astro Islands** as well! This very post is `mdx` in a content collection!</p></blockquote>\n```js\nimport SvelteAsyncStandalone from '@components/SvelteAsyncStandalone.svelte';\n\n<SvelteAsyncStandalone client:visible={\"svelte\"} />\n```\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/svelte-5-patterns-async-remote/)\n\n---\n\n### SSR / Server-Side\n\nI 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)!\n\n[Bluesky post](https://bsky.app/profile/fubits.dev/post/3lzl4jpgaek2m)\n\nAfter several iterations, I've listed some robust examples in my [/lab](/lab/).\n\nSo ~~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.\n\n**Update (2025-09-25):**\n\nAsync Svelte in Astro has been officially [released in Astro 5.14](https://astro.build/blog/astro-5140/#async-rendering-support-for-svelte).\n\n<blockquote>\n<p>The weather widget below is the result of:</p>\n</blockquote>\n```js\n// AstroServerIslandWeatherIdle.astro\n---\nimport SvelteAsyncWeather from '@components/SvelteAsyncWeather.svelte';\n\nconst { city } = Astro.props\n---\n\n<SvelteAsyncWeather city={city} client:idle />\n``````js\n// index.mdx\nimport AstroServerIsland from '@server/AstroServerIsland.astro';\n<AstroServerIsland server:defer city='Tokyo' />\n```<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>\n\n---\n\n> ▶ **Interactive feature** — [view on fubits.dev](https://fubits.dev/notes/svelte-5-patterns-async-remote/)\n\n---\n\n**Incredible!**\n\nFind a simpler example with syntax here: <a href=\"/lab/svelte-async-server-island/\" data-astro-prefetch=\"false\">/lab/svelte-async-server-island</a>\n\n### Server-Side...\n\n**Update (2025-09-29):**\n\n> 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. \n> *But there's more ...*\n\nI 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.\n\n*I claimed that this wouldn't work and I was wrong...*\n\n> Look here: <a href=\"/lab/astrokit/\" >/lab/astrokit</a>. Reload the page. Check the network tab. Inspect the HTML. \n\nThis is a simple Svelte component fetching, awaiting and rendering an Astro Content Collection entry with `getEntry()` from `astro:content`.\n\nAgain, 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.\n\nYou 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!\n\n**Update (2025-10-03)**\n\nAfter 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/)!\n\n**Update (2025-10-04):**\n\nThis 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\"*):\n\n[Bluesky post](https://bsky.app/profile/did:plc:6aglx53tojyuwxwueap5og3h/post/3m2ddignygk2y)\n"
}
},
"description": "Demos with code snippets / REPLs included",
"path": "/notes/svelte-5-patterns-async-remote/",
"publishedAt": "2025-09-23T00:00:00.000Z",
"site": "at://did:plc:6aglx53tojyuwxwueap5og3h/site.standard.publication/self",
"tags": [
"Svelte 5",
"SvelteKit",
"SSR",
"Astro"
],
"textContent": "Context\n\nUpdate (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.\n\nNot 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:\n\n~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!\n\nBluesky post\n\nUpdates\n\nUpdate (2025-09-29):\n\nAstro findings moved to dedicated section below\n\nUpdate (2025-09-25):\n\nIn other Svelte / Vite ecosystem news, Storybook for Svelte also just released support for Svelte Async (and a rewritten intro / tutorial for Svelte 5 CSF)\n\nBluesky post\n\nNew Svelte Async Patterns\n\nAfter 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\n\nTL;DR:\n\nthe new await keyword was introduced in svelte@5.36.0\nbefore svelte@5.39.0 the new await keyword was\nclient-only\ndependent on a parent <svelte:boundary /> with a {#snippet pending()}\nin 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)\nwith svelte@5.39.0\nthe await keyword was enabled for SSR\nand the boundary requirement was dropped\nsee the most minimal, SSR'ed example in lab.fubits.dev/async/final\nnote: 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.)\nwith svelte@5.39.5, await became fully functional in {@html await fn()} / {await fn()} markup expressions and in {#snippet} / {@render snippet()}!\nfor a mind-blowing example see lab.fubits.dev/async/bonus Screenshot of the linked Svelte 5 Async + Remote functions snippet\n\nasync + remote function in a snippet - from <a href='https://lab.fubits.dev/async/bonus'>lab.fubits.dev/async/bonus</a>\nwith SvelteKit defaults, both the final and the bonus examples are SSR'ed / prerendered\n\nNote, that\nthis is merely the surface of the new async + remote patterns!\nboth APIs are still behind experimental flags - for a reason\n\nCheck the docs for more details:\nSvelte await documentation: https://svelte.dev/docs/svelte/await-expressions\nSvelteKit Remote Functions documentation: https://svelte.dev/docs/kit/remote-functions\n\nThat's it for now for Svelte / SvelteKit. Exploring more advanced patterns of await and of remote functions comes next.\nFor async Svelte in Astro see the next section.\n\nUntil 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!\n\nUpdate: Simon's second part of the Remote Functions series is out now: YouTube video\n\nAsync Svelte in Astro\n\nmoved Astro-related updates from above to here\n\nClient-Side\n\n<blockquote><p>Turns out that async Svelte does work in Astro Islands as well! This very post is mdx in a content collection!</p></blockquote>\n\nimport SvelteAsyncStandalone from '@components/SvelteAsyncStandalone.svelte';\n\n<SvelteAsyncStandalone client:visible={\"svelte\"} />\n\n▶ Interactive feature — view on fubits.dev\n\nSSR / Server-Side\n\nI 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!\n\nBluesky post\n\nAfter several iterations, I've listed some robust examples in my /lab.\n\nSo 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.\n\nUpdate (2025-09-25):\n\nAsync Svelte in Astro has been officially released in Astro 5.14.\n\n<blockquote>\n<p>The weather widget below is the result of:</p>\n</blockquote>\n\n// AstroServerIslandWeatherIdle.astro\n\nimport SvelteAsyncWeather from '@components/SvelteAsyncWeather.svelte';\n\nconst { city } = Astro.props\n\n<SvelteAsyncWeather city={city} client:idle />\n\n// index.mdx\nimport AstroServerIsland from '@server/AstroServerIsland.astro';\n<AstroServerIsland server:defer city='Tokyo' />\n\n▶ Interactive feature — view on fubits.dev\n\nIncredible!\n\nFind a simpler example with syntax here: <a href=\"/lab/svelte-async-server-island/\" data-astro-prefetch=\"false\">/lab/svelte-async-server-island</a>\n\nServer-Side...\n\nUpdate (2025-09-29):\n\nturns 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.\nBut there's more ...\n\nI 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.\n\nI claimed that this wouldn't work and I was wrong...\n\nLook here: <a href=\"/lab/astrokit/\" >/lab/astrokit</a>. Reload the page. Check the network tab. Inspect the HTML.\n\nThis is a simple Svelte component fetching, awaiting and rendering an Astro Content Collection entry with getEntry() from astro:content.\n\nAgain, 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.\n\nYou 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!\n\nUpdate (2025-10-03)\n\nAfter 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!\n\nUpdate (2025-10-04):\n\nThis unlocked a pattern previously unimaginable to me (in action here - \"Svelte Ecosystem News\"):\n\nBluesky post",
"title": "Svelte 5 Patterns (Part 3): Async + Remote",
"updatedAt": "2025-10-11T00:00:00.000Z"
}