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

問題：JavaScript過多

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

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

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

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

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

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

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

• 后端框架開始針對REST AP I響應進行優(yōu)化，而不再渲染HTML。因此，我們越來越少地看到帶有模板引擎的后端框架，尤其是在NodeJS中。
• SEO（搜索引擎優(yōu)化）

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

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

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

這樣做的問題是：我們需要一個NodeJS服務器，因為只有NodeJS后端才能執(zhí)行客戶端語言JavaScript。

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

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

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

但是... 它們也有兩個大問題：

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

現(xiàn)實是：有時你只需要一點點 JavaScript 來進行微互動。而且，甚至不是每個頁面都需要！

這就是 Astro 的用武之地。

解決方案：Astro

什么是Astro？

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

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

但是當你需要JS時，你該怎么辦？

只在需要時選擇使用 JavaScript

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

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

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

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

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

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

下面是一個使用 Astro 的最終HTML頁面可能的樣子：

在像Nuxt或NextJS這樣的框架中，在頁面加載之后沒有什么是靜態(tài)的，因為它會對整個頁面進行水合作用，從而注入不必要的JavaScript。

我是否說過Astro最初是一個SSG？因為現(xiàn)在，它不僅僅是那樣。

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

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

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

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

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

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

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

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

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

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

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