在 CC 大佬的星球里多次看到 Island architecture（孤岛架构）的概念，写篇文章记录下自己学习的过程。
是什么
Island architecture 中文可翻译为“孤岛架构”，最早是由Katie Sylor-Miller 在 2019 年提出的，并在 2021 年被 Preact 作者 Json Miller 在 Islnads Architecture 一文中得到推广。其核心理念是将可交互部分的内容分离为一个个单独的“孤岛”，可以单独开发、部署。通过这样的方式降低项目的复杂度，从而提高系统的可维护性和可拓展性。
解决了什没问题
以上图为例，如果我们采用 React 作为前端渲染框架，构建一个纯前端应用。
在页面渲染的过程中，会先向服务端请求 HTML 文件，一般来说 HTML 文件中并没有多少实质性的内容，而是通过请求到的 JS 脚本来绘制出页面的内容。这个过程存在的问题就是当请求 JS 脚本过大时，用户看到的页面是可能是一个白屏，同时也不利于 SEO。
为了解决白屏和 SEO 的问题，我们引入了服务端渲染（SSR），由服务器生成用户第一次进到页面就可以看到的内容，绘制完成后给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定。这个过程叫做
hydration ，翻译为“注水”。SSR 相较于客户端渲染，减少了页面白屏的时间（FCP）。但是 SSR 的引入同样也会带来了一些问题，比如增加了系统的复杂性，更高的服务器负载，首屏渲染速度无法保证。而孤岛架构就是要解决上述问题，将页面可交互部分的内容划分为“孤岛”，而静态部分则直接使用服务端下发的 HTML，不参与
hydration 过程，从而提升页面 TTI。
