Investigation: async Svelte in Server Island in Astro

svelte@5.55.4 | astro@6.1.9 | @astrojs/svelte@8.0.5

composition

SvelteGetJoke.svelte

<script> async function get_joke() { return await fetch('https://icanhazdadjoke.com/', { headers: { Accept: 'text/plain' } }).then((res) => res.text()) } </script> <section> <svelte:boundary> {#snippet pending()} <p>snippet pending</p> {/snippet} <p>{await get_joke()}</p> </svelte:boundary> </section>

---

AstroServerIslandLoad.astro

--- // AstroServerIslandLoad.astro import SvelteGetJoke from '@components/Notes/Features/SvelteGetJoke.svelte' --- <SvelteGetJoke client:load />

---

index.astro (here)

<AstroServerIslandLoad server:defer> <div slot='fallback'>Astro Fallback: Loading</div> </AstroServerIslandLoad>

`client:load`

`client:only='svelte'`

`client:idle`

`client:visible`