最近有很多开发者宣布他们已经将网站迁移到Astro。这通常伴随着一张接近完美的Lighthouse分数的截图和一系列火箭表情符号。
像大多数人一样，我发现无休止的新框架会让人感到厌倦。但我对Astro做了一些研究，认为它真的值得一试。
在本文中，我将向您展示如何使用 Astro 构建基于 Vue 的应用程序，我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。
SPA 架构回顾
在我们看到 Astro 的实际应用之前，我们需要了解它的架构。为此，让我们首先提醒自己单页应用架构的优缺点。
SPA 将网站的所有功能和内容抽象为 JavaScript 组件。这很棒，因为它使网站的开发变得容易。
这种方法的缺点是当网站投入生产时。所有这些JavaScript组件被捆绑在一起成为一个大的应用程序。由于体积太大，浏览器下载和运行的速度可能会很慢。
当然，你可以通过代码拆分来优化这个捆绑。但是，浏览器仍然会有一些前期成本必须支付，只是为了启动网站。
<!-- 典型的 SPA 页面 -->
<head>
<script src="/app.js"></script>
</head>
<body>
<!-- 在 app.js 加载之前，此页面没有有意义的内容 -->
<div id="app"></div>
</body>Islands architecture
Islands架构，Astro使用的架构，也使用了组件。然而，与单页应用程序不同的是，这些组件并没有捆绑到一个 JavaScript 包中。
相反，每个组件都被视为一个独立的迷你应用程序，与所有其他组件隔离存在。
例如，如果您的页面有一个基于 JavaScript 的导航栏，那将是一个迷你应用程序。如果它还具有 JavaScript 驱动的图像轮播，那就是另一个迷你应用程序。等等。
但是，如果这些组件没有被捆绑，它们如何被包含在项目中？我将在下一节解释这个问题。
<!-- Islands architecture -->
<body>
<MyNavBar /> <!-- navbar mini app -->
<main>
<MyCarousel /> <!-- carousel mini app -->
<div class="content">
<!-- more page content... -->
</div>
</main>
</body>服务器渲染的组件
Astro 主要是一个静态站点生成器。它适用于大多数支持服务器渲染组件的 UI 库，包括 Vue、Svelte、Preact、React 和 Lit。
因此，当Astro构建你的应用程序时，每个JavaScript组件都在服务器端加载，内容是”快照“。这个快照被添加到静态页面上。
服务器渲染不是 Astro 特有的功能，但在 SPA 中这是一个可选功能，而在 Astro 中，这是一个至关重要的功能，我们将在下面看到。
<!-- 开发内容 -->
<body>
<MyForm /> <!-- JS component -->
</body>
<!-- 快照内容 -->
<body>
<form> <!-- Server rendered JS component -->
<input type="text" >
<!-- ... -->
</form>
</body>Progressive hydration
这就是Astro的神奇之处——通过islands架构、服务器渲染组件和渐进式水合的组合。
由于我们的页面被划分为服务器渲染的迷你应用程序，互动层（JS）可以独立加载，并且只在需要的时候加载。
例如，您可能有一个交互式表单。此表单位于页面下方，位于视口之外。
表单是服务器渲染的，所以我们在页面上看到它。但是，在用户将其滚动到视图中之前，不需要加载昂贵的 JavaScript。
这就是 Astro 中“渐进式水合作用”的含义——我们只在需要时加载 JavaScript。
建立一个 Vue + Astro 项目
现在理论已经讲完了，让我们来看看它的实际效果吧！
要开始创建 Astro 项目，我们将首先创建一个目录：
$ mkdir vue-astro然后运行 Astro 安装向导：
$ npm init astro安装向导将允许我们选择“Vue”作为我们选择的框架。这将创建一个包含 Vue 组件的样板项目。
Astro组件
Astro 页面保存在 src/pages 目录中。在默认安装中，我们看到一个文件 index.astro，如下所示。
src/pages/index.astro
---
import VueCounter from '../components/VueCounter.vue';
let title = 'My Astro Site';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>Astro 具有单文件组件样式，与 Vue 类似，但有一些重要区别。
首先，在文件的顶部，我们看到似乎是前端内容，即用 --- 划定的内容。这是在服务器端运行的JavaScript。这不会被发送到客户端。
在这里我们可以看到两件重要的事情：首先，我们正在导入一个Vue组件（你可以从任何支持的框架中导入组件）。另外，我们正在设置一个值：title。
这里声明的所有变量在模板中都是可用的。你会注意到 title 在模板中以类似JSX的语法进行插值。
src/pages/index.astro
---
...
let title = 'My Astro Site';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<!-- ... -->接下来，注意模板中声明的组件。
默认情况下，组件在客户端是不交互的，只是由Astro进行服务器渲染。
如果我们想让组件交互，即加载 JavaScript，我们需要给它一个指令告诉客户端何时加载它。
在这种情况下，client:visible 指令告诉 Astro 当组件在页面中可见时使 VueCounter 交互。
如果发生这种情况，Astro 将从服务器请求该组件的 JS 并对其进行水合。
---
import VueCounter from '../components/VueCounter.vue';
...
---
<html lang="en">
<head><!-- ... --></head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>加载Astro
现在让我们运行 Astro 的开发服务器来查看我们的项目。
npm run dev在页面的源代码中，你会看到在文档中没有任何的JavaScript捆绑! 不过，我们确实看到了服务器渲染的Vue组件。
我们还看到 Astro 在文档正文的底部添加了一个脚本。在这里，它加载了一个模块来水合 Vue 组件。
该模块将下载 Vue 组件和依赖项（Vue 框架），而不会阻塞渲染。
index.html
<!-- Page source -->
<body>
<!-- server rendered component -->
<div id="vue" class="counter">
<button>-</button>
<pre>0</pre>
<button>+</button>
</div>
<!-- 添加的代码片段以水合 Vue 组件 -->
<script type="module">
import setup from '/_astro_frontend/hydrate/visible.js';
// ...
</script>为什么 Vue + Astro 可能比 Vue SPA 更好
要了解为什么 Astro 在 UX 方面可以击败单页应用程序，让我们对网站加载时发生的情况进行简化分解。
- index.html已经加载。它没有JS捆绑，但它包括你的服务器渲染的组件，所以用户已经可以看到你的网站内容--只是还没有互动。
- 组件所需的任何JS现在将以一系列独立脚本的形式异步下载。
- 下载这些脚本后，它们将被解析并运行。现在可以进行交互了。
现在让我们想象一下，我们把这个网站重新建成一个单页的应用程序。它现在会如何加载？
- index.html被加载。由于该页面不包含任何内容，用户无法看到任何东西。浏览器将开始下载捆绑程序。
- 下载 JS 包后，浏览器就会对其进行解析。用户仍然看不到任何东西。
- 一旦 JS 包被解析并运行，页面内容就生成了。用户现在可以查看应用程序并与之交互。
简单的说：Astro 网站几乎可以立即提供可见的内容，不像 SPA 需要先下载并运行 JS 包。
(Astro应用也会稍早提供互动性，因为它可能不需要下载那么多JS，因为没有SPA外壳、路由器等)
最后的想法
Astro 的架构可能是比单页应用程序更好的选择，因为它无需 JavaScript 即可使内容可见，并且仅在需要时加载 JS。
从理论上讲，单页应用程序可以通过预渲染和代码拆分的组合来实现类似的效果。不同之处在于，Astro 网站默认以这种方式进行优化，因为您需要选择加入交互性和 JS。
当然，并不是每个应用程序都会从这种架构中受益，因为 SPA 更适合某些类型的应用程序，例如高度动态和交互式的应用程序。所以我们不会期望 SPA 架构会消失。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。