作者丨Futari Boy

編譯丨諾亞

說到Web框架，大家最先想到的可能是 Vue、React，或者是Next.js。但不得不提，有個后起之秀“來勢洶洶”，1.0版本發布至今僅一年，就出盡風頭。它就是Astro。

Astro 是什么？一個現代化的靜態站點生成器和前端框架。它允許開發人員使用組件化的方式構建內容優先的網站。2022 年，Astro在JavaScript明星項目中排名第七，一年新增了15k star！

順帶一提，Astro 的作者也非無名之輩，而是Snowpack的作者 Fred K. Schott，這位可以說是Unbundle 構建工具的祖師爺。

有人說，Astro是2023年最好的Web框架。事實真的如此嗎？且聽我逐一道來。

1、問題：JavaScript太多了

在web開發世界中，事情變化很快，特別是對于JavaScript前端開發人員。

如此之快，以至于我們有時忽略或忘記了我們到底在為誰創建網站和web應用程序：用戶。

自從BackboneJS和AngularJS在2011/2012年變得非常流行以來，網絡上就充斥著spa。

不要誤解我的意思，spa是很棒的，只要你想創建一個web應用程序，而不是一個只有少量JavaScript交互的網站。

但是，因為AngularJS是由Google開發的，而且用UI框架做JavaScript比用jQuery更漂亮，客觀上也更容易維護，所以人們開始為一切都創建spa。

是的，一切，即使是簡單的基于內容的網站……

這在當時導致了兩個大問題：

第一，后端框架開始針對REST API響應進行優化，不再呈現HTML。因此，我們使用模板引擎的后端框架越來越少。特別是在NodeJS中。

第二，SEO（搜索引擎優化）。

spa是在客戶端渲染的，這意味著當像谷歌這樣的搜索引擎爬蟲進入索引內容時，它們什么都沒有看到。

所以我們找到了解決辦法，SSR。

基本上，就是在后端執行前端代碼以進行初始渲染。

問題是:你需要一個NodeJS服務器，因為只有NodeJS后端可以執行客戶端的JavaScript語言。

如果你有一個基于內容的網站，這是一筆很大的開銷。

因此，我們為這些網站找到了一個解決方案：SSG和預渲染。

SSG代表“靜態站點生成器”。在spa出現之前，它們就已經存在了，但在上述問題提出后，它們變得流行起來。

但是，他們也有兩個大問題：

• 它們要么是用JavaScript以外的另一種語言編寫的，這使得在不同項目之間共享UI片段變得非常困難。
• 或者它們是基于Vue、React或Svelte等前端框架使用JavaScript編寫的，因此，由于我們所說的Hydration（水化），發布了太多JavaScript。

現實是：有時你只需要一點點JavaScript來進行微交互。而且，不是每一頁都寫！

這就是Astro的用武之地。

Astro開發團隊最初的設計目標就是：用 Astro 建立一個緩慢的網站幾乎是不可能的。測試顯示，與React Web 框架構建的相同網站相比，Astro 網站的加載速度可以提高 40%，而JS代碼的體積可以減少90% 。

2、解決方案：Astro

Astro最初是一個基于JavaScript語言的SSG，但在客戶端默認不生成JavaScript。

它在構建時執行JS代碼，就像SSR框架一樣，但它不會hydration（水化），因為大多數基于內容的網站不需要JS。

但是當你需要JS的時候，你該怎么辦呢?

在需要時選擇加入JavaScript

你可以像以前那樣使用JavaScript，使用命令式DOM操作或者……

使用像AlpineJS或Vue-petite這樣的東西，它們是即插即用的，只提供少量JS。

對于高級場景，或者當你需要重用來自其他項目的UI組件時，Astro創建了：Islands。

Astro Islands是你可以從Vue、React、Svelte甚至更多前端框架中引入的獨立組件!

這些組件將被單獨渲染并注入到最終的HTML中。靜態(沒有hydration)或動態(使用JS)。

以下是Astro最終HTML頁面的樣子：

在像Nuxt或NextJS這樣的框架中，頁面加載后沒有任何內容是靜態的，因為它會對整個頁面進行hydration，從而注入不必要的JavaScript。

之前提到，Astro最初是一個SSG，如今，它不止于此。

現在Astro也支持SSR，這意味著它也可以像一個簡單的后端框架一樣，使用最好的模板引擎。

3、結論：為什么Astro是2023年最好的web框架?

在一個人們很容易分心的世界里，在我們用手機瀏覽互聯網的地方，速度和頁面加載是關鍵。

Astro是一個Web框架，你可以將其用作靜態站點生成器(SSG)或簡單的后端來呈現不需要作為SPA的頁面。

Astro擁有最通用的模板引擎：

• 它支持來自Vue、React、Svelte、Lit、Preact和Solid JS的外部組件。你可以輕松地重用表示組件。
• 它具有基于文件的URL參數路由和查詢支持
• 它有圖像優化和轉換，支持Markdown，支持 .md和 .mdx，支持frontmatter
• 它支持CSS作用域，支持SASS
• 它具有腳本標記作用域和綁定
• 它可以很容易地集成自定義元素，也就是web組件
• 它對圖像甚至組件都有延遲加載
• 它具有靜態API端點支持
• 它支持多種運行時：Node、Deno和Bun!
• 它可以輕松部署在主要的網絡主機上，包括邊緣：Netlify, Vercel, Cloudflare, Firebase, Surge, Render, Heroku 等等！

所有這些都使Astro成為最好的創作工具：

• 活動網站
• 清單的網站
• 教程的網站
• 投資組合的網站
• 營銷網站
• 視頻網站
• 定制電子商務網站
• 展示、博客或新聞網站

要創建簡單的spa，比如一個帶有固定音頻播放器的網站，你可以使用Hotwire的Turbo和Astro。

現在，你甚至可以使用Astro對“視圖轉換”的新支持，它可以在頁面導航期間保持狀態。

我希望以上這些都能讓你更好地理解為什么要創建Astro，以及為什么它是2023年基于內容的網站的最佳web框架。

參考鏈接：https://itnext.io/ok-astro-is-the-best-web-framework-in-2023-heres-why-734ca15c7062