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?

How does islands architecture work
  1. First the client sends a get request to the server
  2. the server executes all app logic
  3. in order to render the complete HTML page
  4. which it sends back to the client
  5. the client renders the HTML page
  6. and sends a request for each island
  7. once it receives an island
  8. the client executes all island logic again
  9. so as to hydrate it

3. What are the Pros and Cons of Islands Architecture?


Pros:

  • great performance
  • great SEO
  • good accessibility
  • defer loading and hydration of unimportant parts of the page

Cons:

  • 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

✳️
see also Progressive Hydration, React Server Components and Resumability

Resources

Islands Architecture
The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages
Why Astro?
Astro is an all-in-one web framework for building fast, content-focused websites. Learn more.
Islands Architecture - JASON Format
Is 0kb of JavaScript in your Future?
Zero JavaScript has been the new buzz phrase around JavaScript libraries for the last little while.…
Is there a difference between partial and progressive hydration?
by u/Curious-Ad-9724 in nextjs
Why Efficient Hydration in JavaScript Frameworks is so Challenging
Hydration is the name given to the process in JavaScript frameworks to initializing the page in the…
Conquering JavaScript Hydration
That is an ambitious title for an article. An ambitious goal in general. Hydration, the process of…
Hydration is Pure Overhead
Why hydration is a workaround, not the solution.
Don’t blame the developer for what the frameworks did!
While some think it’s fun to blame developers for issues they’re not responsible for, we thought we’d clear the air about a complaint that keeps popping up. Site speed.
Our Current Frameworks are O(n); We Need O(1)
As the complexity of applications increases, the amount of JavaScript downloaded increases (on a typical framework). The only way we can continue building more complex web applications in the future is to lazy load on interaction, not on initial load.

The Qase for Qwik: Love At First TTI
The reasons why you should be looking at Qwik if you care about performant web apps.
Resumability vs Hydration
Resumability is a faster alternative to Hydration. At first glance, it may seem like resumability and Hydration are the same. After all, both bring interactivity to your page. Defining Hydration to be just making a page interactive is so broad as it fails to be useful as it includes non-server-rende…
<script>: The Script element - HTML: HyperText Markup Language | MDN
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL’s GLSL shader programming language and JSON.
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
Render Performance Optimization With React - Adaptive Financial Consulting
60 frames per second (fps), this number not only represents the refresh rate of a typical pc monitor, but also…
Application Holotypes: A Guide to Architecture Decisions - JASON Format