Nevermind

探索 Astro：為內容驅動的網站而生

4 分鐘

1. 我們真的需要那麼多 JavaScript 嗎？

React、Vue、Svelte 等現代前端框架大幅提升了建構複雜 Web 應用程式的開發體驗。但當我們將它們用於建構部落格、作品集、文件或行銷網站時，一個問題也隨之而來：這些以內容呈現為主的網站，真的需要將整個頁面作為單頁應用程式（SPA）來載入嗎？

答案通常是「否」。對於這類網站，使用者的核心需求是快速取得內容，過多的 JavaScript 反而會拖慢頁面的可互動時間（TTI），影響使用者體驗和 SEO。

Astro 正是為了解決這個問題而誕生的。

2. Astro 的核心理念：內容優先，預設零 JS

Astro 是一個現代化的靜態網站產生器（SSG），它的核心理念是內容優先。它旨在盡可能將更多工作放在建置時完成，向瀏覽器傳送盡可能少的 JavaScript。

為了實現這一點，Astro 提出了兩大創新：

  • 預設零 JavaScript（Zero-JS by Default）：Astro 會將你的所有 UI 元件（無論使用 React、Vue 還是 Svelte 編寫）在建置時算繪成純粹的 HTML。如此一來，瀏覽器收到的就是靜態頁面，無須載入任何框架的 JS 執行環境，載入速度極快。
  • 島嶼架構（Islands Architecture）：這是 Astro 的精髓所在。在一個由靜態 HTML 構成的「海洋」中，任何需要用戶端互動的元件都可以被標記為一座「島嶼」。Astro 會獨立為這些島嶼打包並載入所需的 JavaScript，而頁面的其餘部分則保持純靜態。

3. 「島嶼」是如何運作的？

在 Astro 中，你可以透過加入 client:* 指令，將一個元件標記為互動式島嶼。

例如，我們有一個用 React 編寫的計數器元件 Counter.jsx。在 Astro 頁面中可以這樣使用它：

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---
<html>
  <body>
    <h1>Astro 示例</h1>
    <p>这是一个静态的段落，它不会加载任何 JS。</p>

    {/* 这个组件是一个交互式岛屿 */}
    <Counter client:load />

    <p>这是另一个静态段落。</p>
  </body>
</html>

client:load 指令告訴 Astro：

  1. 在伺服器端算繪 Counter 元件的初始 HTML。
  2. 為 Counter 元件建立一個獨立的 JS 套件。
  3. 在頁面載入時，自動載入這個 JS 套件並「啟用」（hydrate）該元件，使其具備互動性。

Astro 還提供了更精細的載入指令，例如 client:idle（瀏覽器閒置時載入）和 client:visible（元件進入視窗時載入），讓效能最佳化更進一步。

4. 框架無關性

Astro 的另一大魅力在於它對 UI 框架的包容性。你可以在同一個 Astro 專案中，同時使用來自 React、Vue、Svelte、SolidJS、Lit 等不同框架的元件。這為團隊協作和技術選型提供了極大的彈性。

結論

Astro 並非要取代 React 或 Vue，而是為特定情境提供了更好的解法。如果你的專案是一個以內容為核心、對效能和 SEO 有極高要求的網站（例如這個部落格本身就是使用 Astro 建構的！），那麼 Astro 無疑是一個值得深入探索的絕佳選擇。它將靜態網站的效能優勢與現代框架的開發體驗完美地結合在一起。

Astro Jamstack 效能 SSG