跳到內容

為何選擇 Astro？

Astro 是個 web 框架，用於打造以內容為中心的網站，例如部落格、行銷、電商網站。Astro 以開創全新的前端架構聞名，相較其他框架使用更少 JavaScript，複雜度更低。需要兼顧網站載入速度與 SEO 嗎？Astro 非常適合你。

特色

標題為 特色

Astro 是多合一的 web 框架，打造網站所需一應俱全。數以百計的整合和 API hooks 任君挑選，滿足客製需求。

以下是一些亮點：

  • 群島：以元件為基礎的 web 架構，專為以內容為中心的網站設計。
  • 跨 UI 框架：支援 React、Preact、Svelte、Vue、Solid、Lit、HTMX、web component 等。
  • 伺服器優先：避免在客戶端執行耗費資源的渲染。
  • 預設零 JS：減少拖慢網站速度的客戶端 JavaScript。
  • 內容合集：統一管理、驗證 Markdown 內容，同時提供 TypeScript 型別安全。
  • 客製化：Tailwind、MDX 等數以百計的整合任君挑選。

設計理念

標題為 設計理念

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

Astro 是⋯⋯

  1. 以內容為主：Astro 專為內容豐富的網站設計。
  2. 伺服器優先：由伺服器渲染 HTML 的網站會執行得更加快速。
  3. 預設即迅速：不太可能用 Astro 寫出緩慢的網站。
  4. 簡單易使用：你不需要是專家，也能用 Astro。
  5. 注重開發者：你應該享有成功打造網站的所需資源。

以內容為主

標題為 以內容為主

Astro 專為內容豐富的網站設計。這包括大部分行銷、出版、文件、部落格、作品集以及電子商務網站等。有內容要展示？那就要讓讀者能夠快速看到。

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

Astro 從靜態網站產生器起家，至始便著重在內容。這使得 Astro 能在兼顧內容與讀者的前提下，將網站切合實際地發展成高效、強力、動態的應用程式。權衡之下，Astro 選擇著重在極致的性能表現，與以構建應用程式為目標的 web 框架不同。

伺服器優先

標題為 伺服器優先

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

這種方法和其他現代 JavaScript web 框架如 Next.js、SvelteKit、Nuxt、Remix 等有顯著差異。這些框架在客戶端渲染整個網站，再搭配伺服器端渲染解決效能問題。這種方式稱作單頁應用程式（SPA）。相較之下，Astro 使用的則是多頁應用程式（MPA）。

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

Astro 優先在伺服器端渲染，只在需要且必要時切換成客戶端渲染。你可以選擇加入在客戶端執行的 UI 框架元件，也能善用 Astro 的轉場過渡動畫路由（view transitions router），精準控制頁面所需的轉場特效動畫。Astro 提供高效的預設渲染模式，使用者可在預先渲染（pre-rendered）和需要時渲染（on-demand rendered）兩種模式間切換、延伸。

預設即迅速

標題為 預設即迅速

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

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

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

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

當構建相同的網站時，Astro 網站與最受歡迎的 React web 框架相比可以在減少 90% JavaScript 的同時提升 40% 載入速度。口說無憑，歡迎觀看：Astro 的性能讓 Ryan Carniato（Solid.js 與 Marko 作者）啞口無言。

簡單易使用

標題為 簡單易使用

Astro 的目標是讓每位 web 開發者能輕鬆上手。無論技術水準、過去開發經驗，Astro 都讓人感到熟悉且平易近人。

.astro UI 語言是 HTML 的超集合：任何合法的 HTML 同時也是合法的 Astro 模板語法！因此，如果你會寫 HTML，你就會寫 Astro 元件！除此之外，Astro 也借鏡其他元件語言受歡迎的功能，例如 JSX 表達式（React）和預設 CSS 作用域（Svelte 與 Vue）。與 HTML 高度相似的特點，使我們在實作漸進增強（progressive enhancement）和常見無障礙設計模式時不需耗費太多力氣。

我們確保開發者可以在 Astro 使用自己喜愛、熟悉的 UI 元件語言，以及重複使用現有的元件。Astro 支援 React、Preact、Svelte、Vue、Solid、Lit 等，甚至包含 web component。

Astro 設計成比其他 UI 框架及語言還簡單，其中一個重要原因是：Astro 是用來在伺服器而非瀏覽器上渲染。這就代表你毋需擔心像：hook（React）、stale closure（還是 React）、ref（Vue）、observable（Svelte）、atom、selector、reaction 或 derivation。由於使用者無法在伺服器端渲染時與頁面互動，所以這些複雜度都消失了。

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

注重開發者

標題為 注重開發者

我們深信，當開發者享受使用 Astro 時，它才算是一個成功的專案。Astro 提供一切所需，幫助你建立網站。

Astro 致力發展開發者工具，例如從打開終端機那一刻就獲得的良好 CLI 體驗；支援 syntax highlighting、TypeScript、Intellisense 的官方 VS Code 外掛；由數百位貢獻者積極維護、翻譯成 14 種語言的文件。

我們的 Discord 社群熱情友好、尊重他人、廣納百川，非常樂意提供協助、動力與鼓勵。開發專案時需要協助嗎？在 #support 建立一則討論串吧！想分享你的 Astro 網站、部落格文章、影片，甚至是手邊做到一半的事情嗎？#showcase 頻道會給予安全的回饋和建設性的評論。歡迎參與我們定期舉辦的即時活動，例如每週的社群會議、「Talking and Doc’ing」、API／臭蟲掃蕩。

身為開源專案，我們歡迎社群成員參與貢獻，不論形式、規模、經驗、水準。在此邀請你參加路線討論，一同探討 Astro 未來的發展方向，也期盼你對核心 codebase、編譯器、文件、語言工具、網站，以及其他專案作出修正和開發功能。