Astro 6.0 來襲：內容網站的下一個標準？

如果你是一個內容網站——部落格、作品集、文件站、電子商務——的開發者，你在 2026 年選擇框架的依據，應該是「這個框架能否讓我的網站載入更快、SEO 更好、開發體驗更順暢」。Astro 在 State of JS 調查中已經連續四年獲得「#1 興趣度」和「#1 滿意度」。現在 Astro 6.0 Beta 17 即將發布——這一次，它帶來了 Fonts API、Live Content Collections 和 CSP API。這些功能對內容網站意味著什麼？

Astro 的現狀：State of JS 四項第一

2025 State of JS 結果

維度	排名	趨勢
使用率	#2	連續兩年
興趣度	#1	連續四年
滿意度	#1	連續三年
正向評價	#1	連續三年

這個結果說明了一個清晰的模式：用過 Astro 的開發者，回頭率極高。

HTTP Archive 採用趨勢

平台	採用率
桌面網站	14.6%
行動網站	11.8%

Astro 的採用率持續上升，知名案例包括 Aftonbladet（瑞典最大新聞網）、MrBeast/Salesforce、Martian Company 等。

Astro 6.0 的核心新功能

Fonts API：字體優化的內建支援

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

export default defineConfig({
  output: 'static',
  fonts: {
    // Astro 6 內建字體優化
    families: [
      { name: 'Inter', weights: [400, 600, 700] },
      { name: 'Noto Sans TC', weights: [400, 700] },
    ],
    display: 'swap',
    preload: true,
  },
});

<!-- 使用 Fonts API -->
<head>
  <!-- Astro 6 自動生成優化過的字體 link -->
  <link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/noto-sans-tc-400.woff2" as="font" type="font/woff2" crossorigin>
</head>

<style>
  body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
  }
</style>

這個 API 的價值：字體是最常被忽略的效能瓶頸之一，Astro 6 把字體優化變成了框架內建功能。

Live Content Collections：從實驗性到穩定

Content Collections（內容集合）是 Astro 的核心功能——讓你用 type-safe 的方式管理 Markdown、MDX 和 JSON 內容。

// src/content/config.ts
// Astro 6：Live Content Collections
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'live', // 新：live 類型
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

// 查詢 live content collections
const { posts } = await getCollection('blog');

// 即時過濾和排序
const recentPosts = posts
  .filter(post => post.data.tags.includes('astro'))
  .sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());

「Live」的意義：當內容變化時，不需要重新 build。這對於高頻更新的內容網站（如新聞、電子商務）特別重要。

CSP API：安全頭的現代化支援

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

export default defineConfig({
  output: 'static',
  integrations: [
    astroCSP({
      policy: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'strict-dynamic'"],
        'style-src': ["'self'", "'unsafe-inline'"],
        'img-src': ["'self'", 'https:', 'data:'],
        'font-src': ["'self'", 'https:'],
        'connect-src': ["'self'", 'https://api.example.com'],
      },
      reportUri: '/csp-violation-report',
    }),
  ],
});

CSP（Content Security Policy）對於安全性要求高的網站是必備的。Astro 6 的內建 CSP API 讓這個設定更加方便。

Astro 5.x 現況（2026 Q1）

Astro 5.18 穩定版

# 升級到 Astro 5.18
npx astro update

# 驗證版本
astro --version
# astro: 5.18.0

Content Layer API 的改進

// Astro 5 的 Content Layer
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content', // 或 'data'
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
  }),
});

Actions request body 大小可配置

// astro.config.mjs
export default defineConfig({
  output: 'server',
  actions: {
    bodyParserLimit: '1mb', // 預設 32kb
  },
});

與競爭框架的比較

Astro vs Next.js

維度	Astro	Next.js
核心定位	內容網站	應用程式
預設渲染	Island Architecture	SSR/SSG
JS 預設	零 JS（可選）	完整 React
學習曲線	低	中高
生態系	成長中	成熟
適合場景	部落格、文檔、portfolio	複雜 Web App

Astro vs Nuxt / SvelteKit

維度	Astro	Nuxt	SvelteKit
預設 JS	零	有限	有限
UI 框架	任意	Vue	Svelte
內容管理	⭐⭐⭐⭐⭐ 強	⭐⭐⭐	⭐⭐⭐
效能	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

何時選擇 Astro

適合 Astro 的場景：

部落格和文檔網站
行銷頁面和作品集
電子商務產品頁面
需要 SEO 優先的網站

不適合 Astro 的場景：

複雜的客戶端應用（用 Next.js）
需要大量即時互動（用 React/Vue）
已有特定框架的團隊（用現有框架）

升級建議：Astro 5 → 6

升級步驟

# 1. 查看官方遷移指南
# https://docs.astro.build/en/guides/upgrade-to/v6/

# 2. 備份現有專案
git checkout -b backup-v5

# 3. 更新相依性
npx astro update

# 4. 處理 breaking changes
# - Fonts API 的新設定方式
# - Live Content Collections 的 type 變化
# - CSP API 的新語法

# 5. 測試
npm run build
npm run preview

Astro 6 的breaking changes 要注意

主要 breaking changes 集中在：

Fonts API 的設定方式改變
Live Content Collections 的 schema 類型
某些實驗性功能變成穩定

建議在正式升級前，先在 staging 環境測試。

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

Astro 6 的更新方向很明確：持續強化內容網站的核心場景。

Fonts API 解決了字體效能問題，Live Content Collections 讓高頻更新內容的網站也能享受 Astro 的效能優勢，CSP API 簡化了安全設定。這些都是內容網站實際會遇到的問題。

對於正在選擇框架的團隊，Astro 的 State of JS 表現說明了一件事：用過 Astro 的開發者，普遍認為這是一個正確的選擇。如果你在 2026 年要建構一個內容網站，Astro 5 或 6 都是值得認真考慮的選項。