Vue.js + Astro 比 Vue SPA 更好嗎？
最近有很多開發者宣布他們已經將網站遷移到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 architectureIslands
架構，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 架構會消失。
原文：https://vuejsdevelopers.com/2021/10/26/vue-astro/
作者：Anthony Gore
