Astro introduced a powerful new pattern called Server Islands last year. If you're building with Astro, it's worth understanding what they are, how...
For further actions, you may consider blocking this person and/or reporting abuse
Beautiful. Astro originally invented the Dynamic Islands concepts. React took it and make RSC where client components are the islands.
Nextjs invented PPR last year to improve SSR performance of slow server components.
Astro took it from them and made server islands which are deferred and until loaded show a fallback slot component. Life is full circle in this world lol I love web dev!
Glad you enjoyed the blog post! And yes, the web is great!
Small correction in Astro inventing islands. It actually came from a meeting between Preact creator, @_developit and at the time frontend architect at Etsy Katie Sylor-Miller.
See Islands Architecture
I think that Katie Sylor-Miller might have moved to BlueSky bsky.app/profile/ksylor.bsky.social since the twitter handle is not finding an account
Thanks Esther!
Oh wow. Didn’t know that. That’s cool. Will check out this article thank you!
Could not find any source/reference on the requirement of setting output=server for Server Islands. Is that true?
Thanks for reading Rong Sen!
It doesn't appear to be referenced in the docs. I think it's implied by the fact you are doing something server-side, but it could be a great documentation PR to update that if it is indeed missing.
Really appreciate how you broke down the server:defer behavior and those child-component gotchas - cleared up a bunch for me. Anyone else experimenting with mixing server islands and client frameworks?
Thanks for the kind words. Glad you enjoyed the blog post!
wow, this is super helpful - i always wonder if using more server stuff actually makes building easier or just adds more stuff to manage long run you ever feel like these things make projects simpler or just different kind of headache
Thanks Nathan! The nice thing about this one is @ascorbic on the Astro core team made the api for this dead simple so that aside from setting your Astro config to
output: server, it's just aserver:deferdirective on an Astro component. 🔥Just realised how the server islands inside Astro components nested as children works the same way as nesting RSC server components inside client components. It’s coz the defered async HTML is received later and slotted in similar to how the RSCpayload for nested server components are streamed in
Great post
Thanks!
If the request has a session you can generate pages with personalized/localized parts on the server, no islands needed. This is the way backend frameworks have worked for years.
The biggest problem is controlling the cache if you do this. The main benefit is no javascript and subrequests.
I would not recommend to use it for related or recent blocks if the link is only the main subject of the page. If it is combined with location or user then I agree.
I know the concept from Drupal as BigPipe which comes from FaceBook. And they got it from the way microprocessors work. There is nothing new about it :)
Great article and video thank you for sharing I am using Astro more and more 👍👍