作者丨Futari Boy

編譯丨諾亞

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

Astro 是什么？一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成器和前端框架。它允許開發(fā)人員使用組件化的方式構(gòu)建內(nèi)容優(yōu)先的網(wǎng)站。2022 年，Astro在JavaScript明星項(xiàng)目中排名第七，一年新增了15k star！

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

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

1、問題：JavaScript太多了

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

如此之快，以至于我們有時(shí)忽略或忘記了我們到底在為誰創(chuàng)建網(wǎng)站和web應(yīng)用程序：用戶。

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

不要誤解我的意思，spa是很棒的，只要你想創(chuàng)建一個(gè)web應(yīng)用程序，而不是一個(gè)只有少量JavaScript交互的網(wǎng)站。

但是，因?yàn)锳ngularJS是由Google開發(fā)的，而且用UI框架做JavaScript比用jQuery更漂亮，客觀上也更容易維護(hù)，所以人們開始為一切都創(chuàng)建spa。

是的，一切，即使是簡單的基于內(nèi)容的網(wǎng)站……

這在當(dāng)時(shí)導(dǎo)致了兩個(gè)大問題：

第一，后端框架開始針對REST API響應(yīng)進(jìn)行優(yōu)化，不再呈現(xiàn)HTML。因此，我們使用模板引擎的后端框架越來越少。特別是在NodeJS中。

第二，SEO（搜索引擎優(yōu)化）。

spa是在客戶端渲染的，這意味著當(dāng)像谷歌這樣的搜索引擎爬蟲進(jìn)入索引內(nèi)容時(shí)，它們什么都沒有看到。

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

基本上，就是在后端執(zhí)行前端代碼以進(jìn)行初始渲染。

問題是:你需要一個(gè)NodeJS服務(wù)器，因?yàn)橹挥蠳odeJS后端可以執(zhí)行客戶端的JavaScript語言。

如果你有一個(gè)基于內(nèi)容的網(wǎng)站，這是一筆很大的開銷。

因此，我們?yōu)檫@些網(wǎng)站找到了一個(gè)解決方案：SSG和預(yù)渲染。

SSG代表“靜態(tài)站點(diǎn)生成器”。在spa出現(xiàn)之前，它們就已經(jīng)存在了，但在上述問題提出后，它們變得流行起來。

但是，他們也有兩個(gè)大問題：

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

現(xiàn)實(shí)是：有時(shí)你只需要一點(diǎn)點(diǎn)JavaScript來進(jìn)行微交互。而且，不是每一頁都寫！

這就是Astro的用武之地。

Astro開發(fā)團(tuán)隊(duì)最初的設(shè)計(jì)目標(biāo)就是：用 Astro 建立一個(gè)緩慢的網(wǎng)站幾乎是不可能的。測試顯示，與React Web 框架構(gòu)建的相同網(wǎng)站相比，Astro 網(wǎng)站的加載速度可以提高 40%，而JS代碼的體積可以減少90% 。

2、解決方案：Astro

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

它在構(gòu)建時(shí)執(zhí)行JS代碼，就像SSR框架一樣，但它不會(huì)hydration（水化），因?yàn)榇蠖鄶?shù)基于內(nèi)容的網(wǎng)站不需要JS。

但是當(dāng)你需要JS的時(shí)候，你該怎么辦呢?

在需要時(shí)選擇加入JavaScript

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

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

對于高級場景，或者當(dāng)你需要重用來自其他項(xiàng)目的UI組件時(shí)，Astro創(chuàng)建了：Islands。

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

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

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

在像Nuxt或NextJS這樣的框架中，頁面加載后沒有任何內(nèi)容是靜態(tài)的，因?yàn)樗鼤?huì)對整個(gè)頁面進(jìn)行hydration，從而注入不必要的JavaScript。

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

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

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

在一個(gè)人們很容易分心的世界里，在我們用手機(jī)瀏覽互聯(lián)網(wǎng)的地方，速度和頁面加載是關(guān)鍵。

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

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

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

所有這些都使Astro成為最好的創(chuàng)作工具：

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

要?jiǎng)?chuàng)建簡單的spa，比如一個(gè)帶有固定音頻播放器的網(wǎng)站，你可以使用Hotwire的Turbo和Astro。

現(xiàn)在，你甚至可以使用Astro對“視圖轉(zhuǎn)換”的新支持，它可以在頁面導(dǎo)航期間保持狀態(tài)。

我希望以上這些都能讓你更好地理解為什么要?jiǎng)?chuàng)建Astro，以及為什么它是2023年基于內(nèi)容的網(wǎng)站的最佳web框架。

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