Islands 架构

定义

Islands 架构(孤岛架构)是一种页面渲染与交互模式。它将页面整体以静态 HTML 形式输出,仅把其中需要交互的若干独立区域视为「孤岛」,对这些区域单独进行客户端注水(hydration),页面其余部分保持为纯静态内容,不附带或仅附带极少的 JavaScript。[1]

原理

传统单页应用通常对整个页面进行一次性注水,即便大量内容是静态的,也要加载并执行完整的框架运行时。Islands 架构反其道而行:服务端渲染出完整 HTML 后,框架仅为标记为交互式的组件生成对应的 JavaScript 包,并在客户端按需、独立地为每个孤岛挂载事件与状态。各孤岛之间相互隔离、可独立加载,通常还支持基于可见性或交互意图的延迟注水策略。

特点

核心优势在于显著降低客户端 JavaScript 的传输与执行量,从而改善首屏可交互时间与整体性能,并保持良好的可访问性与 SEO。其代价是交互区域之间共享状态较为受限,跨孤岛通信需要额外设计;对高度交互、强状态联动的应用并非最佳选择。

应用

Astro 是该架构的代表性框架,允许在同一页面混用 React、Vue、Svelte 等多种 UI 库的孤岛。Marko、Fresh 等也采用了类似理念。Islands 架构尤其适合内容驱动型站点,如博客、文档、电商列表与营销页,这类页面以静态内容为主、交互点稀疏,能最大化享受其性能红利。