Islands Architecture & Partial Hydration: 2026 Guide

Q: What is islands architecture?

Islands architecture renders a whole page to static HTML on the server and marks only specific components as interactive. Each interactive component, an island, ships its own JavaScript and hydrates independently, so the static parts of the page, such as article text, navigation and footers, never send code to the browser. Astro is the best-known framework built on this model, and it lets islands be written in React, Vue, Svelte or Solid.

Q: What is partial hydration and why does it matter?

Hydration is the client-side step that downloads component code, re-runs rendering to rebuild the component tree and attaches event handlers. Full hydration does this for the entire page. Partial hydration does it only for the components that need interactivity. It matters because the cost scales with component code on the page, not with how interactive the page is, so content-heavy pages pay a large tax for little benefit.

Q: Islands vs React Server Components: which should I choose?

Choose by your interactivity ratio, the share of each page's component code that genuinely needs client state. When only a few independent widgets are interactive, islands are simpler and ship the least JavaScript. When content and application sections are mixed and share state or need client-side navigation, React Server Components with tight 'use client' boundaries fit better, because the page stays a single React tree with a client router.

Q: Is Qwik resumability better than hydration?

Technically it avoids the start-up replay entirely: the server serialises state and listener locations into the HTML, and handler code downloads only when a user interacts. That can be a strong fit where start-up cost dominates. The trade-off is a smaller ecosystem and hiring pool, and Qwik-only components. For most organisations, islands or server components reach a similar result using skills the team already has.

Q: How do I measure the interactivity ratio of my site?

Take your ten highest-traffic page templates and classify every component as static, enhanced or stateful. Static renders once, enhanced works as plain HTML and improves with JavaScript, and stateful needs client state, such as a cart, search-as-you-type or a filterable chart. Weight each by the code it pulls in. The stateful share is your ratio; a low ratio favours islands and a high one favours an app framework.

Q: Will moving to islands improve Interaction to Next Paint?

Often, on content pages, because less JavaScript runs on the main thread during load, so taps are not queued behind hydration work. A good INP is 200ms or less at the 75th percentile of page loads. It will not help if your INP problem comes from third-party scripts such as tag managers or chat widgets, or from heavy work inside the interactive widgets themselves, so measure field data per template first.

Q: Does Cloudflare's acquisition of Astro lock me into Cloudflare?

According to Astro's own announcement in January 2026, the framework remains open source under the MIT licence, keeps an open governance model and an open community roadmap, and continues to support a wide range of deployment targets beyond Cloudflare. The practical lock-in risk for an islands site is low, because islands can be written in mainstream component frameworks and the output is largely static HTML.

Q: When should I not use islands architecture?

Do not use it for an application where most of the page is stateful and widgets depend on each other, such as dashboards, editors or complex configurators; you would end up rebuilding a client router and global store on top of islands. Also avoid migrating purely for a lab Lighthouse score when field Core Web Vitals are already good, and do not expect islands to fix costs that come from third-party scripts.

Satyam Kumar

返回博客

ai-architecture

Islands Architecture and Partial Hydration in 2026: Hydration Is a Per-Component Tax, So Your Interactivity Ratio Picks the Architecture, Not the Framework

By Satyam KumarOctober 14, 202612 min read

islands architecture partial hydration astro islands astro server islands react server components qwik resumability hydration cost interaction to next paint inp optimisation ship less javascript content site performance mpa vs spa core web vitals 2026 frontend architecture astro cloudflare web performance 2026

Islands Architecture and Partial Hydration in 2026: Hydration Is a Per-Component Tax, So Your Interactivity Ratio Picks the Architecture, Not the Framework

Frequently Asked Questions

分享这篇文章

Twitter LinkedIn WhatsApp

Satyam Kumar

Founder & AI Architect, AppScale LLP

人工智能和云架构师。帮助团队构建可扩展到数百万的系统。

LinkedIn GitHub

Islands Architecture and Partial Hydration in 2026: Hydration Is a Per-Component Tax, So Your Interactivity Ratio Picks the Architecture, Not the Framework

Frequently Asked Questions

分享这篇文章

Comments

Leave a comment