跳转到内容
Astro Astro

為何選擇 Astro？

Astro 是個多合一的網頁框架，用於打造快速且以內容為中心的網站。

為何要在眾多網頁框架中選擇 Astro？以下的五個核心設計理念，有助於解釋為什麼我們要創造出 Astro、它解決了甚麼樣的問題以及為什麼 Astro 可能會是你專案或團隊的最佳選擇。

Astro 是……

  1. 以內容為主：Astro 是專為豐富內容網站而設計的。
  2. 伺服器優先：網站藉由伺服器來渲染 HTML 在執行上會更加快速。
  3. 預設即迅速：在 Astro 中不太可能會建立出緩慢的網站。
  4. 簡單易使用：你不需要是個專家就能用 Astro 建立些東西。
  5. 靈活且齊全：超過 100 種 Astro 整合功能可供使用。

以內容為主

Astro 是專為豐富內容的網站設計的。 這包括大部分的行銷網站、出版網站、文檔網站、部落格、作品集以及部分電子商務網站。

相較之下，大多數的現代網頁框架都是為了建立網頁應用程式而設計的。這些框架更適合用來構建更複雜、更像應用程式的網站；管理者儀錶板、收件匣、社群網路、代辦事項列表，甚至是類原生應用程式如 Figma 和 Ping。

這就是要了解關於 Astro 的最重要差異之一。在權衡之下，Astro 選擇著重在內容展示與無與倫比的性能表現，而這些特性對以構建應用程式為目標的網頁框架來說是沒有意義的。

伺服器優先

Astro 盡可能使用伺服器端渲染而非客戶端渲染。 這和傳統的伺服器端框架（PHP、WordPress、Laravel 與 Ruby on Rails 等）過去幾十年的使用方法相同。不過你無須再學習另一套伺服語言，因為 Astro 依然使用 HTML, CSS 以及 JavaScript（或是 TypeScript，如果你比較喜歡的話）。

這種方法和其他現代的 JavaScript 網頁框架如 Next.js、SvelteKit、Nuxt 和 Remix 等有顯著不同。這些框架需要配合伺服器以及客戶端渲染整個網頁，以解決性能問題。這種方式稱作 單頁應用程式（SPA），而對比之下 Astro 使用的是 多頁應用程式（MPA） 的方法。

SPA 模型有它的優勢，然而代價是額外的複雜度及折衷的性能。這些取捨會影響網頁的性能（包括重要的指標如可互動時間（TTI）），不過這對以內容為中心的網站並沒有太大的意義，因為對於這類網站來說，首次載入性能才是最重要的。

預設即迅速

擁有良好性能一直都是重要的，但對內容為主的網站來說特別關鍵。事實證明，差勁的性能會讓你失去參與度、轉換率及金錢。舉例來說：

  • 每快 100 毫秒 → 轉換率增加 1%（Mobify，年收入增加 38 萬美金）
  • 加快 50% → 銷售量增加 12%（AutoAnything）
  • 加快 20% → 轉換率增加 10%（Furniture Village）
  • 加快 40% → 註冊率增加 15%（Pinterest）
  • 加快 850 毫秒 → 轉換率增加 7%（COOK）
  • 每慢 1 秒 → 減少 10% 使用者（BBC）

在許多網頁框架中，開發者很容易就可以建立出一個看起來很棒的網站，但部署後載入速度會非常慢。JavaScript 通常是罪魁禍首，因為使用者的手機和低功耗設備的速度鮮少能和開發者的筆電相比。

Astro 的奇妙之處就在於它如何將上述兩種價值（內容為中心和伺服器優先 MPA 架構）結合，並在做出衡量後提供其他框架所沒有的特點。結果是每個網站都擁有開箱即用的出色性能。這也是我們的目標：在 Astro 中幾乎不可能構建出緩慢的網站。

當構建相同的網站時，Astro 網站與最受歡迎的 React 網頁框架相比可以在減少 90% JavaScript 的同時提升 40% 載入速度。但請對我們的說法存疑：歡迎觀看 Astro 的性能讓 Ryan Carniato（Solid.js 及 Marko 的創造者）啞口無言。

簡單易使用

Astro 的目標是讓每位網頁開發者能輕鬆上手。 Astro 被設計為無論技術水準或過去的網頁開發經驗如何，都能感到熟悉且平易近人。

我們首先確保你可以使用任何你已知的喜好 UI 組件語言。在一個 Astro 專案中，使用 React、Preact、Svelte、Vue、Solid 或是 Lit 等來建立新的 UI 組件都是可行的。

我們同樣也想確保 Astro 能擁有一個良好的內建組件語言，於是我們創造了我們自己的 .astro UI 語言。它很大程度上受到 HTML 影響：任何可用的 HTML 片段都是一個有效的 Astro 組件！但它同樣也結合了我們從其他組件語言借用的特點，像是 JSX 表達式（React）及預設的 CSS 作用域（Svelte 和 Vue）。如此貼近 HTML 也讓它能容易的無開銷使用漸進增強及常見無障礙樣式。

Astro 被設計成比其他 UI 框架及語言還簡單。一個重要原因是 Astro 是設計用來在伺服器而非瀏覽器上渲染。這就代表你無須擔心像是：hooks（React）、stale closures（還是 React）、refs（Vue）、observables（Svelte）、atoms、selectors、reactions 或 derivations。由於伺服器並沒有反應性，所以這些複雜性就不見了。

我們最喜歡的說法之一是：選擇性地加入複雜度。 我們在設計 Astro 時盡可能的在開發者體驗中去除「必須的複雜度」，特別是當你第一次使用這套框架。你可以在 Astro 中只用 HTML 和 CSS 建立一個「Hello World」範例網站。當你需要建立更強大的的東西時，你可以在使用過程中逐漸增加新功能及 API。

靈活且齊全

Astro 是個多合一的網頁框架，提供所有你建立網站需要的一切。 Astro 包含了組件語法、基於檔案的路由、資產處理、構建流程、打包、優化和資料獲取等。你可以只用 Astro 核心功能就構建出一個優秀的網站。

如果你需要更多控制，你可以透過超過 100 種整合來拓展 Astro，像是 React、Svelte、Vue、Tailwind CSS 和 MDX 等。只要一個指令就可以連接到你最愛的 CMS (EN) 或部署到你喜好的主機上。

Astro 與 UI 無關，這代表你可以自備 UI 框架（BYOF）。Astro 官方支援 React、Preact、Solid、Svelte、Vue 和 Lit。你甚至可以在同一個頁面上混搭不同的框架，使未來的遷移更容易，也避免專案被單一個框架所拘束。