在前端框架不断“做加法”的这些年，我们习惯了 全量客户端渲染（CSR），也逐步接受了 SSR / SSG + Hydration 这种折中方案。但随着应用规模扩大，一个问题愈发明显：
真的有必要让整个页面都变成可交互的 JavaScript 应用吗？
Island 架构，正是在这种反思下诞生的一种前端架构模式，而“部分水合”则是它最核心的技术支撑。
一、传统 Hydration 的问题在哪？
1. 全量 Hydration 的工作机制
以 React / Vue SSR 为例：
- 服务端输出完整 HTML
- 浏览器加载 JS bundle
- 对整棵 DOM 树执行 Hydration
- 绑定事件、创建状态、建立响应式系统
即使页面中 90% 是静态内容，也要 Hydrate 100%
2. 带来的现实问题
- 首屏 JS 体积过大
- Hydration 阻塞主线程
- TTI（可交互时间）变慢
- 移动端性能尤为明显
页面“看起来”已经出来了，但“点不了”。
二、Island 架构是什么？
1. 核心思想一句话
页面默认是静态的，只有需要交互的部分才是“动态岛屿（Islands）”
2. Island 架构的页面模型
[ 静态 HTML ]
├── Header（纯静态）
├── Article（纯静态）
├── 🔹 SearchBox（Island，需交互）
├── Content（纯静态）
├── 🔹 Comment（Island，需交互）
└── Footer（纯静态）
- 大部分内容：0 JS
- 少量组件：独立加载、独立水合
3. Island 的几个关键特征
| 特性 | 说明 |
|---|---|
| 局部 JS | 每个 Island 自己的 bundle |
| 延迟加载 | 可视 / 交互时才加载 |
| 解耦 | 不依赖全局状态树 |
| 框架无关 | React / Vue / Lit 都可以 |
三、什么是“部分水合（Partial Hydration）”？
1. 定义
部分水合 指的是：
只对页面中需要交互的组件进行 Hydration，而不是整页
2. 与传统 Hydration 对比
| 维度 | 全量 Hydration | 部分 Hydration |
|---|---|---|
| Hydration 范围 | 整页 | 指定组件 |
| JS 执行量 | 大 | 极小 |
| 首屏交互 | 慢 | 快 |
| 架构复杂度 | 低 | 稍高 |
| 性能上限 | 有瓶颈 | 更高 |
3. 常见触发策略
on:load页面加载后on:visible进入视口on:idle浏览器空闲on:interaction用户首次交互
四、Island 架构的实现方式
1. Astro：最典型的 Island 架构实现
Astro
---
import Counter from '../components/Counter.jsx';
---
<article>
<h1>文章内容</h1>
<p>这是纯静态 HTML</p>
<Counter client:visible />
</article>
特点：
- 默认 0 JS
client:*明确声明水合策略- 天然支持多框架混用
2. 框架层面的演进
| 框架 | 对应能力 |
|---|---|
| Astro | Island 原生 |
| Qwik | Resumability（更激进） |
| Vue | v-once / 懒加载组件 |
| React | Server Components |
| Lit | 天然适合 Island |
五、为什么 Lit / Web Components 非常适合 Island？
1. 技术契合点
- Web Component 天然隔离
- 无全局运行时依赖
- 单组件即可完成 Hydration
- 可独立注入到任意 HTML
HTML
<yc-tooltip></yc-tooltip>
<script type="module" src="/yc-tooltip.js"></script>
只加载你需要的那一个组件。
2. 与微前端 / 多框架共存友好
- 一个 Island = 一个自包含组件
- 不污染宿主应用
- 适合 CMS / 内容型站点
六、Island 架构适合哪些场景？
非常适合
- 技术博客 / 文档站
- 营销页 / 官网
- 内容型平台
- 组件库文档
- SSR + Web Components 项目
不太适合
- 强交互、状态高度耦合的后台系统
- 游戏 / 实时协作应用
- 全局状态驱动 UI 的复杂应用
Island 不是银弹，它是 “内容优先型页面” 的最优解。
七、Island 架构带来的思维转变
从：
“整个页面是一个应用”
转向：
“页面是 HTML，交互只是点缀”
这意味着：
- 更少的 JS
- 更快的首屏
- 更清晰的组件边界
- 更可持续的性能优化空间
八、总结
Island 架构与部分水合并不是对现代前端的否定，而是一次去中心化、去过度工程化的回归：
- HTML 回到核心位置
- JavaScript 只做必须的事
- 性能不再靠“优化”，而是靠“设计正确”
如果你正在构建 内容驱动型 Web 应用，Island 架构，值得认真考虑。
文章评论