Published on

从Astro认识岛屿架构

Authors
  • avatar
    作者
    Michael

岛屿架构(Islands Architecture) 如今已经不是新鲜的概念了,社区上已经有了较多成熟的方案。

概览图:

这其中的典型代表是 Astro。Astro 对岛屿架构的解释,也非常直观:

Astro 群岛“指的是静态 HTML 中的交互性的 UI 组件。一个页面上可以有多个岛屿,并且每个岛屿都被独立呈现。你可以将它们想象成在一片由静态(不可交互)的 HTML 页面中的动态岛屿。

从上面这句话的定义中可以提炼一些要点:

  • 静态 HTML。
  • 交互性的 UI 组件。
  • 多个岛屿,支持独立呈现。

为了解析这些要点,我们还是得简单了解一下 Astro 这个框架的特性。

Astro 宣称自己是 ‘zero-JS frontend architecture’,即 Astro 在服务端渲染静态 HTML,客户端中不需要加载额外的 JS 就能完整呈现内容。

Astro 简单使用

写一个简单 DEMO 试试:

React 组件:

import { useState } from 'react'

export const Counter = () => {
  const [count, setCount] = useState(0)

  return <div onClick={() => setCount((i) => i + 1)}>click me to increment: {count}</div>
}

Astro 文件:

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Counter } from '../components/Counter';
---

<Layout title="Welcome to Astro.">
  <main>
    <Counter />
    <ul role="list" class="link-card-grid">
      <Card
        href="https://docs.astro.build/"
        title="Documentation"
        body="Learn how Astro works and explore the official API docs."
      />
      <Card
        href="https://astro.build/integrations/"
        title="Integrations"
        body="Supercharge your project with new frameworks and libraries."
      />
    </ul>
  </main>
</Layout>

<style>
  ...;
</style>

这语法,astro 集大家之所长,吸取了 Vue SFC 和 React 的 JSX, 还有 MDX。

如何交互

然而,这个有别于典型的 SSR 框架。SSR 也是在服务端渲染完整 HTML 树,但是在客户端依然需要加载完整的视图框架代码,然后进行水合(Hydration),才能让页面变得可交互:

那 Astro 没有 JS,显然是无法与用户进行动态交互的。Astro 的解决办法就是 岛屿架构, 我们只需将需要动态交互的页面模块声明为岛屿,如下图,页头和图片轮播就是可交互的岛屿。

现在将 React 组件声明为岛屿:

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Counter } from '../components/Counter';
---

<Layout title="Welcome to Astro.">
  <main>
-    <Counter/>
+    <Counter client:load />
    <ul role="list" class="link-card-grid">
      <Card
        href="https://docs.astro.build/"
        title="Documentation"
        body="Learn how Astro works and explore the official API docs."
      />
      <Card
        href="https://astro.build/integrations/"
        title="Integrations"
        body="Supercharge your project with new frameworks and libraries."
      />
    </ul>
  </main>
</Layout>

我们只需将对应的 React 组件加上 client:load 指令,Astro 就是将其识别为岛屿,该 React 组件的代码及其相关依赖会被打包到一起,在客户端端加载和水合。

现在我们的 Counter 组件在客户端就是一个可交互的状态了。Astro 基本上没有什么上手门槛,建议读者自己玩一下。有机会再展开讲一下它的实现原理。

有了‘岛屿’赋能的 Astro 架构:

Astro 在服务端渲染完整的 HTML 树,然后在客户端中按需加载岛屿代码,并进行水合。看起来有点像微前端、或者 iframe 这样的机制。

现在来回顾一下开头提到的 ‘要点’

岛屿架构SSR + CSRCSR
静态 HTML静态 HTML 优先,无 JavaScript服务端渲染 HTML 初始内容, 包含完整的客户端副本完全在客户端加载渲染
交互性的 UI 组件默认完全静态,通过岛屿局部增强可交互性全局可交互全局可交互
多个岛屿,支持独立呈现岛屿之间互相独立,可以独立加载和交互完整加载。可以通过代码分块 + progressive-hydration 实现按需加载progressive-hydration

岛屿架构的优势

岛屿架构非常适合以内容为中心的网站,比如博客,文档网站,新闻网站等等。在 Astro 的定位非常清晰,它把站点类型分为两种:

  • 内容为中心 → 也称为 网站 → Astro 擅长
  • 交互为中心的 → 也称为 Web 应用程序 → 应该使用 Next.js 或者 Nuxt.js 这样的框架

在岛屿架构擅长的场景中,Astro 给出了比较:

小结

岛屿架构本身概念并不复杂,是前端框架和工程化发展的一个阶段性质变结果。
前后端分离(分工上)还是不变的趋势,相比传统的 MPA ,岛屿架构更加现代化,拥有更好的开发体验。
相比 SPA,岛屿架构在以内容为中心的场景下,优势也非常明显。

参考