Islands 架构

Islands 架构模型早在 2019 年就被提出来了，并在 2011 年被 Preact 作者Json Miller  在 Islnads Architecture[3]  一文中得到推广。这个模型主要用于 SSR (也包括 SSG) 应用，我们知道，在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。

那么当应用的体积逐渐增大时，需要在客户端执行的 JS 脚本也会越来越多，这也意味着 TTI(可交互时间) 指标越来越高:

为了解决这个问题，Islands 架构将页面拆分为各自独立的组件，包含静态组件和可交互组件，如下图的例子所示：

可以清楚的看到，一个页面中只有部分的组件交互，那么对于这些可交互的组件，我们可以并行地执行 hydration 过程，因为组件之间是互相独立的。

而对于静态组件，即不可交互的组件，我们可以让其不参与 hydration 过程，直接复用服务端下发的 HTML 内容。

可交互的组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构

优缺点

他比较适合对首屏渲染速度、TTI 要求高，但整体页面交互不复杂的场景，比如：

• 电商页面
• 博客
• 文档

对于重交互性的Web应用（比如后台管理系统、社区），更适合传统的SSR方案（比如Next.js）或CSR方案（直接使用前端框架）。