作者丨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框架。事實真的如此嗎？且聽我逐一道來。
在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來進行微交互。而且，不是每一頁都寫！
這就是Astro的用武之地。
Astro開發團隊最初的設計目標就是：用 Astro 建立一個緩慢的網站幾乎是不可能的。測試顯示，與React Web 框架構建的相同網站相比，Astro 網站的加載速度可以提高 40%，而JS代碼的體積可以減少90% 。
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，這意味著它也可以像一個簡單的後端框架一樣，使用最好的模板引擎。
在一個人們很容易分心的世界裡，在我們用手機瀏覽網際網路的地方，速度和頁面加載是關鍵。
Astro是一個Web框架，你可以將其用作靜態站點生成器(SSG)或簡單的後端來呈現不需要作為SPA的頁面。
Astro擁有最通用的模板引擎：
所有這些都使Astro成為最好的創作工具：
要創建簡單的spa，比如一個帶有固定音頻播放器的網站，你可以使用Hotwire的Turbo和Astro。
現在，你甚至可以使用Astro對「視圖轉換」的新支持，它可以在頁面導航期間保持狀態。
我希望以上這些都能讓你更好地理解為什麼要創建Astro，以及為什麼它是2023年基於內容的網站的最佳web框架。
參考連結：https://itnext.io/ok-astro-is-the-best-web-framework-in-2023-heres-why-734ca15c7062