IsLand岛屿架构浅析
岛屿架构(IsLands Architecture)由Etsy前端架构工程师Katie Sylor-Miller于2019年首次提出，并由Preact的作者Jason Miller在这篇文章进行了扩展。
岛屿架构是什么？
岛屿架构是区别于现今主流的SPA项目的另一种解决方案，其中岛屿指的是在MPA项目中，具备交互性的UI组件，由于页面为静态，而该组件独立于静态页面而存在，就像是页面如平静的大海，而一个个交互性组件如海上互相独立的孤岛，故而以岛屿一词代指。
岛屿架构的概念其实很简单: 在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或槽。这些占位符/槽包含来自其相应小部件的服务器渲染的 HTML 输出。它们表示可以在客户端上“水合”成小型独立小部件的区域，重用其服务器渲染的初始 HTML。
乍一看，跟SSR很像，跟微前端也很像。但是仔细思考便会发现不同，SSR可以看做整个页面是一个组件，从这个角度来看确实就是符合岛屿架构的概念，但是却解决不了岛屿架构解决的问题–在客户端水合完成前页面无法操作。而微前端仅仅是表象上跟岛屿架构相似，两者大海一个是SPA项目，一个是静态HTML。
岛屿架构解决的问题
现今的SSR方法基本都基于React、Vue等框架，这里会有两个问题
- HTML内容由服务端渲染输出到客户端后，在客户端还需要与js代码进行数据与DOM的绑定，我们一般称之为水合(
hydrate)。而这就导致用户的可操作时间被延后了，需要等待JS加载，等待水合完毕。而对于交互性少的页面，我们其实可以选择去掉这块耗时的操作。 - 还有一个问题是一旦服务端渲染结果与客户端水合失败，而导致从头开始重新渲染。
- 即使水合顺利，前期加载的JS内仍然包含太多无效代码，这是webpack打包与模块包必不可少的，但是对于单个页面来说却又不需要的。
而岛屿架构由于服务端直出的html文件并不依赖于岛屿，所以岛屿加载期间并不影响页面的呈现以及用户的可操作性。而岛屿之间独立存在，也不依赖于岛屿的加载顺序。
Astro
目前使用最多的岛屿架构框架是Astro.
Astro 与 UI 无关，这意味着可以自带 UI 框架（BYOF）。
React、Preact、Solid 、Svelte、Vue 和 Lit 都在 Astro 中得到官方支持。
具体框架的使用就不再展开，有需要看文档会更直观详细，最主要的是我们要理解其中的关键思想，知道主要解决的什么问题，而框架的使用并不是一件复杂的事情。
结语
不知道看官有没有发现，我的blog其实也是一个岛屿架构，尽管我先前并不知道岛屿架构这个概念，但是为了提升性能，我仍旧选择了这个方案。
“Markdown文件转静态html，其中评论模块以类似岛屿的形式后加载。由于内容完全是静态的，所以甚至可以充分使用浏览器缓存进一步提速。”
前端的发展由简入繁，从最开始的静态HTML网站的展示，到传统后端模板的多页应用（MPA），而Ajax添加更多有趣的操作，再而后Node出世百花齐放。而繁到一定程度，便又会返简，期待岛屿架构大行其道之日，回头再看，Web Component与岛屿架构相得益彰，大有可为。