Astro 是什麼？——新一代靜態網站框架入門

前言

在過去幾年的前端生態中，我們經歷了一個有趣的循環：從靜態 HTML，到全 SPA（Single Page Application），再到 SSR（Server-Side Rendering）和 SSG（Static Site Generator）。每一種方案都在解決某些問題的同時，也帶來了新的取捨。

而 Astro 選擇了一條不同的路。

Astro 的核心哲學

Astro 的設計圍繞著一個簡單但激進的前提：盡可能減少傳送到瀏覽器的 JavaScript。

在傳統的 React/Vue 框架中，即使一個頁面沒有任何互動，框架的 runtime 仍然會被載入到用戶端。這意味著用戶必須下載、解析和執行幾十 KB 的 JavaScript，只是為了看到一些靜態文字和圖片。

Astro 的做法是：在構建時將所有 HTML 渲染完畢，預設輸出零 JavaScript。只有當你明確標記某個組件需要互動時，它的 JavaScript 才會被載入。

關鍵特性

1. Zero JS by Default

這是最核心的區別。一個 Astro 頁面如果沒有任何互動元素，它的輸出就是純 HTML + CSS。沒有框架 runtime，沒有 hydration 開銷。

2. Islands Architecture

Astro 提出了 Islands 架構（也稱為 Partial Hydration）——頁面上的每個互動組件都是一個獨立的「島嶼」，它們各自獨立載入自己的 JavaScript，互不干擾。靜態部分則保持為純 HTML。

3. 多框架支援

你可以在同一個 Astro 專案中同時使用 React、Vue、Svelte、Solid 或 Preact 組件。這讓團隊遷移變得平滑——不需要一次重寫所有東西。

4. Content Collections

Astro 提供了類型安全的內容集合管理系統，讓 Markdown、MDX 和 JSON 內容擁有自動補全、校驗和查詢能力。

適合的場景

場景	推薦程度
部落格 / 內容網站	⭐⭐⭐⭐⭐
文件網站	⭐⭐⭐⭐⭐
電子商務產品頁	⭐⭐⭐⭐
行銷登陸頁	⭐⭐⭐⭐⭐
儀表板 / 後台	⭐⭐⭐

和 Next.js 的關鍵差異

• 輸出策略：Astro 預設是靜態站點產生器（SSG），Next.js 預設是伺服器渲染（SSR）
• JS 開銷：Astro 預設零 JS，Next.js 即使是靜態頁面也包含 React runtime
• 架構：Astro 使用 Islands，Next.js 使用 React Server Components
• 學習曲線：Astro 更接近傳統 HTML 寫法，Next.js 需要理解 React 生態

開始使用

建立一個新的 Astro 專案只需要一行指令：

pnpm create astro@latest

然後按照引導選擇模板和配置即可。

結語

Astro 不是在發明新的 UI 框架，而是在重新思考一個問題：我們真的需要為每個頁面載入那麼多的 JavaScript 嗎？ 對於內容為主的網站來說，答案往往是否定的。

它不完美，但它在它擅長的領域——內容網站——做得非常好。這也是為什麼越來越多的人選擇 Astro 來建立他們的部落格和文檔站點。