This repository has been archived on 2024-11-01. You can view files and clone it, but cannot push or open issues or pull requests.
server-islands/README.md

31 lines
1.9 KiB
Markdown
Raw Permalink Normal View History

2024-08-15 17:13:49 -05:00
# MinPluto Experimentation: Astro Server Islands
2024-08-15 14:40:42 -05:00
2024-08-15 17:13:49 -05:00
![Banner](https://ipx.sudovanilla.org/https://astro.build/_astro/header-astro-server-islands.sfPWYGsg.webp)
## 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](https://astro.build/blog/astro-4120/#experimental-server-islands).
You can learn and look into Astro Server Island with the helpful links provided:
- [RFC](https://github.com/withastro/roadmap/blob/server-islands/proposals/server-islands.md)
- [Server Islands](https://astro.build/blog/future-of-astro-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
<img src="https://i.sudovanilla.org/oGqLZrs.png"/>
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:
```jsx
<Avatar server:defer>
<GenericUserImage slot="fallback" />
</Avatar>
```