Astro 是什麼？專為內容驅動網站設計的高效前端框架

Astro 是專為內容導向型網站而生的超輕量框架，兼具極速效能與自由整合力，本文將從實戰角度出發，帶你深入理解為何我從 GatsbyJS 遷移至 Astro。

Astro 是什麼？

Astro 是一套專為內容驅動型網站而設計的現代化 Web 框架，特別適合建立部落格、行銷頁面、技術文件網站與電商平台。其核心特色為「島嶼架構（Island Architecture）」，預設輸出靜態 HTML，僅在必要時載入 JavaScript，有效優化網站載入速度與效能。

Astro 的三大核心價值主張：

⚡️ 極速性能：提供領先業界的載入速度，顯著優於大多數主流框架。零 JavaScript 的預設輸出使初次載入時間減少 90%，且支援部分水合技術 (Partial Hydration) 讓互動元素僅在需要時才載入 JS。
🧩 無縫框架整合：原生支援 React、Vue、Svelte、Solid、Preact、Alpine.js 等主流前端框架，實現真正的技術棧中立。同一頁面可混用不同框架組件，無需額外配置，極大降低技術遷移成本。
🛠️ 完整開發體驗：內建內容集合 (Content Collections) 提供型別安全的內容管理，自動圖像優化，智能資源處理，以及與 Vercel、Netlify、Cloudflare Pages 等平台的一鍵部署整合。開發伺服器支援快速熱更新 (HMR)，顯著提升開發效率。

為何我選擇從 GatsbyJS 遷移至 Astro

作為一位長期使用 GatsbyJS 的部落格開發者，雖然 Gatsby 提供了許多優雅的功能與豐富的生態系統，但在實際使用中，我逐漸遇到一些限制與開發效率的瓶頸。這也成為我轉向 Astro 的主要原因。

功能	GatsbyJS	Astro
建構速度	較慢（依賴 GraphQL）	快速（預設靜態 HTML）
資料存取	強制 GraphQL	自由使用 JS/TS
SEO 表現	佳	更佳（零 JS 預設）
開發體驗	中等（需額外配置）	佳（開箱即用）

以下是我做出這個遷移決定的幾個關鍵考量：

🚀 更快的建構與載入速度

Gatsby 在大型內容網站上容易出現建構速度緩慢的問題，尤其當內容數量增加時，build 時間可能會達到數分鐘以上。而 Astro 採用預渲染靜態 HTML 的架構，支援增量式靜態生成（ISR），建構速度顯著加快。載入效能也更加穩定，對 SEO 與使用者體驗都有實質幫助。

❌ 不再需要 GraphQL

Gatsby 強制性的 GraphQL 架構雖然功能強大，但對於維護小型內容站來說反而成為開發負擔。每新增一個內容或頁面類型，都需要撰寫繁瑣的 GraphQL 查詢。Astro 則讓我直接用 JavaScript / TypeScript 操作資料，更直覺、更輕量，也降低學習曲線。在 Astro 中，可以直接在元件的腳本區塊使用伺服器端程式碼獲取資料，無需額外的資料層，大幅簡化了開發流程：

---
// 直接使用 fetch API 獲取資料
const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
---

<ul>
  {posts.map(post => (
    <li>{post.title}</li>
  ))}
</ul>

✨ 更直觀且靈活的語法設計

Astro 的 .astro 檔案巧妙結合了前端模板語法與 Markdown，大幅簡化了頁面撰寫流程。這種設計不僅讓內容創作更加直觀，還使元件引入變得異常清晰。與 Gatsby 的純 React 架構相比，Astro 提供了顯著提升的靈活性：

混合語法支援：在同一個 .astro 文件中，你可以無縫混合 HTML、CSS 和 JavaScript。
內建 Markdown 支援：直接在 .astro 文件中撰寫 Markdown 內容，無需額外配置。
多框架兼容：自由選擇並混用 React、Vue、Svelte 等主流前端框架的元件。
智能靜態分析：Astro 會自動優化你的代碼，移除未使用的 JavaScript。
簡潔的元件語法：使用類 HTML 的語法定義元件，降低學習曲線。

這種靈活性不僅適用於內容密集型網站，還能滿足複雜的互動需求，讓開發者在不同專案類型間自如切換。Astro 的設計理念是：讓開發者專注於內容和功能，而不是被框架的限制所束縛。

🧩 伺服器與客戶端明確分離

Astro 的架構為伺服器端與瀏覽器端程式碼劃清界線，解決了許多現代框架在處理伺服器程式碼時的常見問題。Astro 採用「部分水合」(Partial Hydration) 技術，只有被標記為需要互動的元件才會載入 JavaScript，大幅減少了初始載入時間和運行時開銷。伺服器端邏輯嚴格限制在 server 上執行，有效防止敏感資訊洩露。

這種清晰的分離體現在 Astro 的檔案結構中：

.astro 檔案中的 frontmatter 區域（--- 之間的部分）只在伺服器端執行
HTML 模板部分預設靜態渲染，除非使用特定指令（如 client:load）
靜態資源（如圖片、樣式表）自動最佳化，無需額外配置

Astro 還提供了強大的內容管理功能：

內建 Markdown 和 MDX 支援，適合撰寫長篇文章
Content Collections API 提供型別安全的內容查詢和管理
自動生成 RSS feed，便於訂閱更新

相較於 Next.js，Astro 的架構能更有效地防止伺服器端程式碼洩露到客戶端。Next.js 的伺服器元件雖然強大，但在某些情況下可能會不小心將敏感資訊暴露給瀏覽器。Astro 的明確分離策略確保了伺服器邏輯始終保持在伺服器端，大幅降低了資料外洩的風險，同時維持了開發的靈活性和效率。

🎨 支援 SASS、TypeScript 等現代工具

TypeScript (Microsoft)

Astro 開箱即用地支援 SASS、SCSS 與 TypeScript，這讓我在樣式撰寫與程式開發時都能使用自己熟悉的工具，提升維護性與開發效率。無需再額外設定繁瑣的 config 或安裝 plugin。只需在 style 標籤中指定 lang 屬性：

---
// 元件腳本區塊
const title = "我的 Astro 元件";
---

<h1>{title}</h1>

<style lang="scss">
  $primary-color: #4c1d95;
  $secondary-color: #8b5cf6;
  
  h1 {
    color: $primary-color;
    font-size: 2rem;
    
    &:hover {
      color: $secondary-color;
      text-decoration: underline;
    }
    
    @media (max-width: 768px) {
      font-size: 1.5rem;
    }
  }
</style>

Astro 的技術優勢

Long exposure photography of road and cars (Marc-Olivier Jodoin)

🚀 卓越效能與建構速度

Astro 預設生成靜態 HTML，結合 Partial Hydration 技術，確保只有需要互動的部分才注入 JavaScript。也支援自動模組分割與延遲加載，全面優化載入體驗。

實測顯示：

使用 Astro 的網站 Core Web Vitals 通過率高達 65%，
相較 Next.js（28%）與 Nuxt（26%）更具競爭優勢。

🏝️ 島嶼架構（Island Architecture）

一種革新的前端架構模式，將網頁視為「靜態內容海洋中的互動島嶼」。核心原則是將頁面分解為兩部分：大部分內容以純 HTML/CSS 靜態呈現（海洋），而互動元件（島嶼）則選擇性地注入 JavaScript。這種精確控制使網站能夠：

顯著減少 JavaScript 總量
實現更快的頁面載入與渲染
提升低效能裝置上的使用體驗
改善 SEO 表現

與傳統 SPA 不同，島嶼架構允許開發者為每個元件獨立決定水合時機，實現真正的漸進式增強。

🔍 SEO 最佳化

Astro 能夠將整個網站預渲染為純 HTML，這是透過其編譯時的靜態生成（SSG）功能實現的。在構建過程中，Astro 會執行所有元件代碼，解析 Markdown 內容，並生成完全靜態的 HTML 文件。執行 astro build 命令後，Astro 會在 dist 目錄下產生獨立的 HTML 檔案，每個路由對應一個完整的 HTML 文件，無需依賴客戶端 JavaScript 即可呈現內容。

這種「零 JavaScript」的預設輸出模式使得頁面能被搜尋引擎完全爬取，無需等待客戶端 JavaScript 執行。相較於其他框架可能產生的 JavaScript 驅動型單頁應用（SPA），Astro 生成的靜態 HTML 能够被 Googlebot、Bingbot 等搜尋引擎爬蟲更有效地解析与索引。

當搜尋引擎爬蟲訪問 Astro 網站時，它們會接收到完整渲染的 HTML 內容，而非需要執行 JavaScript 才能顯示的骨架頁面。這大幅提升了內容的可索引性與爬取效率。我將 Gatsby 部落格遷移至 Astro 後，Google 索引速度從 3-5 天縮短至 24 小時內，且網站在搜尋結果的曝光率提升了 35%。此外，Astro 內建的 <meta> 標籤管理和自動生成的 sitemap.xml 也進一步增強了網站的 SEO 表現。

🔗 框架整合能力

Astro 提供真正的框架中立設計，能無縫整合 React、Vue 等主流前端框架。只需安裝相應整合包，即可在 Astro 專案中使用這些框架的元件：

# 添加 React 支援
npx astro add react

# 添加 Vue 支援
npx astro add vue

Astro 的 add 命令會自動完成整合的設置，包括安裝必要的依賴包並更新配置文件。如果你遇到任何問題，也可以選擇手動安裝：

# 手動添加 React 支援
npm install @astrojs/react react react-dom

# 手動添加 Vue 支援
npm install @astrojs/vue vue

然後在 astro.config.mjs 中啟用這些整合：

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [react(), vue()]
});

之後就可以在同一頁面中混用不同框架的元件：

---
import ReactCounter from '../components/ReactCounter.jsx';
import VueGreeting from '../components/VueGreeting.vue';
---

<div>
  <ReactCounter client:load />
  <VueGreeting client:visible name="Astro" />
</div>

透過 client: 指令控制元件的水合方式，讓你能精確決定何時載入 JavaScript：

client:load: 頁面載入時立即水合
client:idle: 瀏覽器空閒時水合
client:visible: 元件進入視口時水合
client:media: 符合指定媒體查詢時水合
client:only: 僅在客戶端渲染，不進行伺服器端渲染

這種細粒度控制確保了最佳的性能和用戶體驗，同時保持了交互功能的靈活性。

🧑‍💻 開發者體驗

Astro 將開發者友好性作為其核心原則。透過結合內容集合（Content Collections）和 TypeScript 類型驗證，它提高了內容一致性並減少錯誤。我已經實現了一個「部落格分類統計」功能，只要在 categories.json 中更新分類，所有分類頁面就會自動同步。你可以點擊導航欄的分類，探索更多相關文章。

此外，Astro 的錯誤提示明確、HMR 穩定，Markdown / MDX 支援完善，讓內容與元件無縫融合，加快內容更新速度。

📚 內容導向設計理念

Astro 是一個專注於內容驅動型網站的前端框架，專門針對靜態內容的優化設計。在我的使用過程中，我發現其最大的特色在於對 Markdown 的強大支持，這使得內容創作者可以輕鬆撰寫和管理文章。此外，Astro 的 .astro 模板語法直觀且靈活，類似於增強版的 HTML，讓開發者能夠更高效地構建頁面。

我已集成了多個功能到我的部落格系統中，包括 Frontmatter 支持以管理文章元數據，自動化的分類統計功能來動態整理內容分類，並提供了懶加載以提升頁面加載速度。此外，延伸閱讀連結功能進一步引導用戶探索更多相關內容，只需撰寫少量代碼即可實現這些功能。Astro 的設計理念真正實現了為內容服務，顯著提升了網站的用戶體驗和 SEO 表現。

Astro Hooks

Astro Hooks 是一個強大的功能，它允許你在網站的不同生命周期點執行自定義代碼。

astro:config:setup: 在配置初始化時執行
astro:config:done: 在配置完成時執行
astro:build:done: 在構建完成時執行
astro:build:rendered: 在頁面渲染完成時執行

以下是一個實際應用的例子，展示如何使用 astro:build:done hook 將最新的文章元數據推送到 Algolia：

import { type AstroIntegration } from 'astro';
import { readFile } from 'node:fs/promises';
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_API_KEY!
);

const processRecords = async (data: any[]) => {
  return await client.saveObjects({
    indexName: 'blog',
    objects: data,
  });
};

export default function algolia(): AstroIntegration {
  return {
    name: 'algolia',
    hooks: {
      'astro:build:done': async ({ logger, dir }) => {
        try {
          const path = new URL('./algolia.json', dir);
          const data = await readFile(path);
          if (!data) {
            throw new Error('No data found in data.json');
          }
          const res = JSON.parse(data.toString());
          if (!Array.isArray(res)) {
            throw new Error('Invalid data format: expected an array');
          }
          await processRecords(res)
            .then(() => {
              logger.info('Records successfully processed')
            })
            .catch((err) => logger.error(`Error processing records: ${err}`));
        } catch (error) {
          logger.error(`An error occurred: ${error}`);
        }
      }
    }
  };
}

而此程式碼定義了一個 Astro API 路由，用於擷取並處理部落格文章，返回 JSON 格式的文章資料。

import { getCollection } from 'astro:content';
import type { APIRoute } from 'astro';

export const GET: APIRoute = async () => {
  const posts = await getCollection('blog');
  const processedPosts = await Promise.all(
    posts.map(async (post) => {
      return {
        objectID: post.id,
        title: post.data.title,
        description: post.data.description || '',
        image_url: post.data.header_image,
        link: `/blog/${post.data.slug}/`,
        tags: post.data.tags || [],
      };
    })
  );

  return new Response(
    JSON.stringify(processedPosts),
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
};

這個例子展示了如何在網站構建完成後，自動將最新的文章資訊同步到 Algolia 搜索引擎，從而確保你的網站搜索功能始終保持最新狀態。

Astro 的應用場景

🚀 整合 Cloudflare 與 Astro

Astro 提供了官方的 Cloudflare 整合插件，讓你能輕鬆部署到 Cloudflare Pages 並使用 Cloudflare 的邊緣功能。以下是實現步驟：

安裝 Cloudflare 插件：
```
npx astro add cloudflare
```

更新 astro.config.mjs：

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare()
});

在 Cloudflare Pages 設置中，將構建命令設為 npm run build，輸出目錄設為 dist。
將你的 Astro 專案連接到 Cloudflare Pages，每次推送到主分支時會自動觸發部署。

這樣設置後，你就可以利用 Cloudflare 的全球 CDN 網絡、自動 HTTPS、和邊緣計算能力，大幅提升網站性能和安全性。Cloudflare Pages 會自動處理路由，無需額外的 _routes.json 配置。

🧩 與 CMS 系統整合

Astro 無縫整合各類 Headless CMS 系統，包括 Strapi、Contentful、Sanity、WordPress REST API、Notion API 和 Ghost CMS 等，通過內建的數據獲取功能，可在構建時輕鬆拉取內容，實現高效的靜態生成。以 Contentful 為例：

// src/pages/blog/[slug].astro
---
// 在構建時從 Contentful 獲取所有文章
export async function getStaticPaths() {
  const contentful = await import('contentful');
  const client = contentful.createClient({
    space: import.meta.env.CONTENTFUL_SPACE_ID,
    accessToken: import.meta.env.CONTENTFUL_ACCESS_TOKEN,
  });
  
  const entries = await client.getEntries({
    content_type: 'blogPost',
  });
  
  return entries.items.map(entry => ({
    params: { slug: entry.fields.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
---

<article>
  <h1>{entry.fields.title}</h1>
  <div set:html={entry.fields.content}></div>
</article>

這種方式讓內容創作者能在熟悉的 CMS 環境中工作，同時開發者可利用 Astro 的效能優勢，實現最佳的用戶體驗。

誰在使用 Astro？

以下是一些知名企業和平台採用 Astro 的案例：

Salesforce (force.com)
- 用於構建高性能的企業級 Web 應用
- 利用 Astro 的靜態生成能力優化大規模內容展示
Cloudflare (cloudflare.com)
- 在官方文檔和開發者門戶中應用 Astro
- 結合 Cloudflare Pages 實現全球快速部署
Vercel (vercel.com/docs/frameworks/astro)
- 提供 Astro 的零配置部署支持
- 官方文檔詳細介紹如何在 Vercel 上使用 Astro：
  - 已有 Astro 專案：安裝 Vercel CLI，運行 vercel 命令
  - 新建專案：克隆 Astro 範例倉庫，或使用 Vercel 模板市場
- 提供一鍵部署按鈕和線上範例展示
Font Awesome (fontawesome.com)
- 重構官網以提升加載速度和用戶體驗
- 利用 Astro 的組件島實現複雜的交互功能
其他採用者
- PNGTree：優化圖片庫網站的性能
- Netlify：在官方博客和文檔中使用 Astro
- Pages.dev：提供 Astro 專案範本和部署支持