MinPluto Experimentation: Astro Server Islands

What is it?

In summary, Astro Server Islands is a feature in the Astro framework that combines static HTML and dynamic server-generated components. In Astro, an "island" is an interactive UI component on a page, such as a header, while the rest of the page is static HTML. Server Islands allows developers to extend this architecture to the server, allowing them to stream markup from the server. This allows for CDN caching of static content, while also allowing for customizable data rendering.

The feature became available as an experimental option in Astro 4.12.0.

You can learn and look into Astro Server Island with the helpful links provided:

• RFC
• Server Islands on Astro Blog

How it would be used in MinPluto

On the to-do list of MinPluto development, I've been looking for an easy way to add faster loading time for pages and also to add loading animations known as "Skeleton Screens". This new Server Islands feature may help with this process.

Skeleton Screens

Getting this to work is very straight forward with Astro Components. A component must be added using server:defer, for the skeleton, it should be added into the slot of the component with the name fallback, which should use slot="fallback".

Once the content is fetched and loaded, it'll replace the skeleton that was slotted in with the actual component we want to use.

Example from Astro:

<Avatar server:defer>
  <GenericUserImage slot="fallback" />
</Avatar>