this website is built with astro and deployed on cloudflare pages . i was building with frameworks like nextjs, remix, svelte or just plain react spa, but astro works quite differently than the others.

in astro, an island is an enhanced ui component on an otherwise static page of html . it always runs in isolation from others on the page and multiple islands can run together to form a full page. client islands can still share state and communicate with each other, even though they run in different component contexts.

it even allows running react , vue , svelte , solidjs on the same page. isn’t that cool?

astro offers directives to load islands in a specific way

<!-- loads js of this component on page load, rest website remains static -->

<MyReactComponent client:load />

<!-- Loads js of this component only when it becomes visible in the viewport -->

<HeavyImageCarousel client:visible />

just like we have suspense in rsc, here the server directive in astro hits the same goal. allows static part of the page to render until the server is ready to render the dynamic part.

<!-- doesn't block the static page from loading -->
<Avatar server:defer />