跳到內容

為何選擇 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 框架都是為了建立網頁應用程式而設計的。這些框架更適合用來構建更複雜、更像應用程式的網站;管理者儀錶板、收件匣、社群網路、待辦事項列表,甚至是類原生應用程式如 FigmaPing。然而,如此複雜的設計可能導致傳遞內容時效能低落。

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、編譯器、文件、語言工具、網站,以及其他專案作出修正和開發功能。