Island Party
React, Svelte, and Vue on one page — each hydrating on its own schedule.
Three frameworks, one party
Astro renders everything as static HTML first. Interactive pieces — called
islands — hydrate independently using different
client:* directives.
React · client:load
Hydrates immediately on page load.
0
Svelte · client:visible
Hydrates when scrolled into view.
Tap the ring to spin a new hue
Vue · client:idle
Hydrates when the browser is idle.
Howdy, Astro!
Client directives used
client:load- Hydrate immediately — good for above-the-fold UI.
client:visible- Hydrate when the element scrolls into view.
client:idle- Hydrate when the browser main thread is free.