Vue.js + Astro 比 Vue SPA 更好吗？-技术圈

最近有很多开发者宣布他们已经将网站迁移到Astro。这通常伴随着一张接近完美的Lighthouse分数的截图和一系列火箭表情符号。

像大多数人一样，我发现无休止的新框架会让人感到厌倦。但我对Astro做了一些研究，认为它真的值得一试。

在本文中，我将向您展示如何使用 Astro 构建基于 Vue 的应用程序，我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

SPA 架构回顾

在我们看到 Astro 的实际应用之前，我们需要了解它的架构。为此，让我们首先提醒自己单页应用架构的优缺点。

SPA 将网站的所有功能和内容抽象为 JavaScript 组件。这很棒，因为它使网站的开发变得容易。

这种方法的缺点是当网站投入生产时。所有这些JavaScript组件被捆绑在一起成为一个大的应用程序。由于体积太大，浏览器下载和运行的速度可能会很慢。

当然，你可以通过代码拆分来优化这个捆绑。但是，浏览器仍然会有一些前期成本必须支付，只是为了启动网站。


<head>
  <script src="/app.js">script>
head>
<body>

<div id="app">div>
body>

Islands architecture

Islands架构，Astro使用的架构，也使用了组件。然而，与单页应用程序不同的是，这些组件并没有捆绑到一个 JavaScript 包中。

相反，每个组件都被视为一个独立的迷你应用程序，与所有其他组件隔离存在。

例如，如果您的页面有一个基于 JavaScript 的导航栏，那将是一个迷你应用程序。如果它还具有 JavaScript 驱动的图像轮播，那就是另一个迷你应用程序。等等。

但是，如果这些组件没有被捆绑，它们如何被包含在项目中？我将在下一节解释这个问题。


<body>
<MyNavBar /> 
<main>
  <MyCarousel /> 
  <div class="content">
    
  div>
main>
body>

服务器渲染的组件

Astro 主要是一个静态站点生成器。它适用于大多数支持服务器渲染组件的 UI 库，包括 Vue、Svelte、Preact、React 和 Lit。

因此，当Astro构建你的应用程序时，每个JavaScript组件都在服务器端加载，内容是”快照“。这个快照被添加到静态页面上。

服务器渲染不是 Astro 特有的功能，但在 SPA 中这是一个可选功能，而在 Astro 中，这是一个至关重要的功能，我们将在下面看到。


<body>
<MyForm /> 
body>


<body>
<form> 
  <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


<body>

<div id="vue" class="counter">
  <button>-button>
  <pre>0pre>
  <button>+button>
div>

 
<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 架构会消失。

原文：https://vuejsdevelopers.com/2021/10/26/vue-astro/
作者：Anthony Gore