Island Architecture - jellyfish-tom/TIL GitHub Wiki
[SOURCES]
- https://docs.astro.build/en/concepts/islands/
- https://www.patterns.dev/vanilla/islands-architecture/
- https://jasonformat.com/islands-architecture/
tl;dr: The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages. The output of islands is progressively enhanced HTML, with more specificity around how the enhancement occurs. Rather than a single application being in control of full-page rendering, there are multiple entry points. The script for these “islands” of interactivity can be delivered and hydrated independently, allowing the rest of the page to be just static HTML.
The term “component island” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019. This idea was then expanded on and documented in this post by Preact creator Jason Miller on August 11, 2020.
An “island” refers to any interactive UI component on the page. Think of an island as an interactive widget floating in a sea of otherwise static, lightweight, server-rendered HTML.
An island always runs in isolation from other islands on the page, and multiple islands can exist on a page. Islands can still share state and communicate with each other, even though they run in different component contexts.
This flexibility allows to support multiple UI frameworks like React, Preact, Svelte, Vue, and SolidJS. Because they are independent, you can even mix several frameworks on each page.
This may seem similar to "micro-frontends" at first glance. Both approaches share the idea of breaking applications up into independent units, however "micro-frontends" do not typically imply that composition of those units is achieved using HTML.
Benefits
The most obvious benefit of building with Astro Islands is performance: the majority of your website is converted to fast, static HTML and JavaScript is only loaded for the individual components that need it. JavaScript is one of the slowest assets that you can load per-byte, so every byte counts.
How is it different from MicroFrontend?
The main difference between island architecture and microfrontends is that island architecture focuses on breaking down an application into separate, self-contained modules that each have their own frontend and backend (consider each component as a self-sustainable micro-app), while microfrontends focus on breaking down the frontend of an application into small, independent components that can be developed and deployed independently.