1. What is Islands Architecture?
Islands Architecture is a method of achieving Partial Hydration (hydrate parts of page independently), by creating separate islands of interactivity alongside static HTML
2. How does Islands Architecture work?
- First the client sends a get request to the server
- the server executes all app logic
- in order to render the complete HTML page
- which it sends back to the client
- the client renders the HTML page
- and sends a request for each island
- once it receives an island
- the client executes all island logic again
- so as to hydrate it
3. What are the Pros and Cons of Islands Architecture?
- great performance
- great SEO
- good accessibility
- defer loading and hydration of unimportant parts of the page
- limited number of tools offering Islands Architecture
- not suitable for highly interactive apps
- page change causes refresh
- execute all app logic twice
- once on the server and once on the client
4. When should you use Islands Architecture?
- when your site contains both static and interactive parts
- when you want fast First Paint (FP), First Contentful Paint (FCP) and Time To Interactive (TTI)
- when you want to bring your own framework (use Astro)
Perfect for content-rich websites like blogs, marketing sites, documentation sites and some e-commerce sites