MinPluto/server-islands
MinPluto/server-islands
1
Fork 0
Code Issues Pull requests Activity

Update README

Browse source
This commit is contained in:
Korbs 2024-08-15 18:13:49 -04:00
parent 34873130d8
commit 90e23e64ab
1 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -1,3 +1,31 @@
# server-islands
# MinPluto Experimentation: Astro Server Islands
Experimenting with Astro's new Server Island technology.
![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>
```