以下解釋是全面理解為什么 Astro 在2023年成為最佳 web 框架所必需的。

問題：JavaScript過多

在 Web 開發(fā)世界中，變化發(fā)生得非?？?，尤其是對(duì)前端JavaScript開發(fā)者而言。

變化之快，以至于我們有時(shí)會(huì)忘記為誰(shuí)創(chuàng)建網(wǎng)站和 web  應(yīng)用：用戶。

自從 BackboneJS 和 AngularJS 在2011/2012年變得非常流行后，web 就被SPA（單頁(yè)應(yīng)用）淹沒了。

別誤會(huì)，只要你想創(chuàng)建一個(gè) web  應(yīng)用而不是一個(gè)帶有少量JavaScript交互的網(wǎng)站，SPA 是非常好的。

但是... 因?yàn)?AngularJS 是由Google制作的，而且使用UI框架進(jìn)行 JavaScript 編程比使用jQuery 更加時(shí)髦和客觀上更易于維護(hù)，人們開始為每一件事都創(chuàng)建 SPA。

是的，所有事情，甚至包括簡(jiǎn)單的基于內(nèi)容的網(wǎng)站...

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

• 后端框架開始針對(duì)REST AP I響應(yīng)進(jìn)行優(yōu)化，而不再渲染HTML。因此，我們?cè)絹碓缴俚乜吹綆в心０逡娴暮蠖丝蚣埽绕涫窃贜odeJS中。
• SEO（搜索引擎優(yōu)化）

SPA在客戶端進(jìn)行渲染，這意味著當(dāng)像Google這樣的搜索引擎爬蟲來索引內(nèi)容時(shí)，它們什么也看不到。

于是，解決方案出現(xiàn)了：SSR（服務(wù)器端渲染）。

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

這樣做的問題是：我們需要一個(gè)NodeJS服務(wù)器，因?yàn)橹挥蠳odeJS后端才能執(zhí)行客戶端語(yǔ)言JavaScript。

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

于是，針對(duì)這些網(wǎng)站找到了解決方案：SSG（靜態(tài)站點(diǎn)生成器）和預(yù)渲染。

SSG在SPA成為一種事物之前就已經(jīng)存在，但在上述問題出現(xiàn)后，它們變得越來越流行。

但是... 它們也有兩個(gè)大問題：

• 要么它們用的是除JavaScript之外的其他語(yǔ)言編寫，這讓在不同項(xiàng)目之間共享UI組件變得非常困難。
• 要么它們是基于像Vue、React或Svelte這樣的前端框架用JavaScript編寫的，因此由于我們稱之為“水合作用”，它們發(fā)送了過多的JavaScript。

現(xiàn)實(shí)是：有時(shí)你只需要一點(diǎn)點(diǎn) JavaScript 來進(jìn)行微互動(dòng)。而且，甚至不是每個(gè)頁(yè)面都需要！

這就是 Astro 的用武之地。

解決方案：Astro

什么是Astro？

Astro 最初是一個(gè)基于 JavaScript 語(yǔ)言的靜態(tài)站點(diǎn)生成器（SSG），但默認(rèn)情況下在客戶端不生成任何JavaScript。

它在構(gòu)建時(shí)執(zhí)行你的JS代碼，就像服務(wù)器端渲染（SSR）框架一樣，但它不進(jìn)行水合作用（hydration），因?yàn)榇蠖鄶?shù)基于內(nèi)容的網(wǎng)站不需要 JS。

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

只在需要時(shí)選擇使用 JavaScript

你可以像舊時(shí)一樣使用JavaScript，通過命令式DOM操作，或者...

使用像AlpineJS或Vue-petite這樣令人驚嘆的東西，它們是即插即用的，并且只發(fā)送少量的JS。

對(duì)于高級(jí)場(chǎng)景或當(dāng)你需要重用其他項(xiàng)目中擁有的UI組件時(shí)，Astro創(chuàng)建了：Islands（島嶼）。

Astro Islands是獨(dú)立的組件，你可以從Vue、React、Svelte甚至更多的前端框架（見結(jié)論部分）中帶來！

這是他們能做的最方便的事情。

這些組件將被單獨(dú)渲染，并注入到最終的HTML中。要么是靜態(tài)的（沒有水合作用），要么是動(dòng)態(tài)的（帶有JS）。

下面是一個(gè)使用 Astro 的最終HTML頁(yè)面可能的樣子：

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

我是否說過Astro最初是一個(gè)SSG？因?yàn)楝F(xiàn)在，它不僅僅是那樣。

現(xiàn)在 Astro 還支持SSR，這意味著它也可以像一個(gè)簡(jiǎn)單的后端框架一樣運(yùn)作，配備有目前最優(yōu)秀的模板引擎。

結(jié)論：為什么Astro是2023年最佳的Web框架？

在一個(gè)人們?nèi)菀追中?、大量使用手機(jī)瀏覽互聯(lián)網(wǎng)的世界里：速度和頁(yè)面加載是關(guān)鍵。

Astro 是一個(gè)可以用作靜態(tài)站點(diǎn)生成器（SSG）或用作簡(jiǎn)單后端渲染不需要作為SPA的頁(yè)面的Web框架。

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

• 它支持來自Vue、React、Svelte、Lit、Preact和Solid JS的外部組件。你可以輕松地重用展示性組件。
• 它具有基于文件的路由，支持URL參數(shù)和查詢
• 它具有圖像優(yōu)化和轉(zhuǎn)換、Markdown支持（.md和.mdx）、前置內(nèi)容支持
• 它具有CSS作用域支持、SASS支持
• 它具有腳本標(biāo)簽作用域和打包
• 它可以輕松集成自定義元素，也就是Web組件
• 它具有圖像甚至組件的懶加載
• 它具有靜態(tài)API端點(diǎn)支持
• 它支持多種運(yùn)行時(shí)：Node、Deno和Bun！
• 它可以輕松部署在主要的Web主機(jī)上，包括邊緣服務(wù)器：Netlify、Vercel、Cloudflare、Firebase、Surge、Render、Heroku等！

所有這些使Astro成為創(chuàng)建以下類型網(wǎng)站的最佳工具：

• 活動(dòng)網(wǎng)站
• 列表網(wǎng)站
• 教程網(wǎng)站
• 作品集網(wǎng)站
• 營(yíng)銷網(wǎng)站
• 截屏網(wǎng)站
• 自定義電子商務(wù)網(wǎng)站
• 展示、博客或新聞網(wǎng)站

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

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

希望以上所有內(nèi)容都讓你對(duì)Astro的創(chuàng)建目的以及為什么它是2023年面向基于內(nèi)容的網(wǎng)站的最佳Web框架有了一個(gè)很好的了解。