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

因此，我們為這些網站找到了一個解決方案：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