前端技術(shù)日新月異，最初的靜態(tài)網(wǎng)站逐漸被由服務(wù)端生成的網(wǎng)站所取代，后來又逐漸向客戶端渲染的應(yīng)用轉(zhuǎn)變。不過客戶端渲染也存在一些問題，如加載時(shí)間變長和搜索引擎優(yōu)化難度等。Astro 這個新的前端框架結(jié)合了服務(wù)端渲染和客戶端渲染的優(yōu)點(diǎn)，可以更好地解決這些問題。

本文就來介紹一下這兩年爆火的前端框架 Astro，它在兩年的時(shí)間新增了 30k+ star:

這個前端框架，有點(diǎn)不一樣。

Astro 基本概念

Astro 是一個開源的 JavaScript 框架，用于在流行的UI框架（如React、Preact、Vue 或 Svelte）之上生成 Web 應(yīng)用。Astro 的頁面由多個獨(dú)立的組件組成。為了提高加載速度，Astro 會在服務(wù)端對頁面進(jìn)行預(yù)渲染，并剝離所有 JavaScript，除非將某個組件標(biāo)記為交互式，此時(shí) Astro 將發(fā)送必要的最小量 JavaScript 以實(shí)現(xiàn)交互功能。

通過這種策略，Astro 頁面加載速度快，因?yàn)樵谑状武秩緯r(shí)不需要執(zhí)行任何 JavaScript。在注水的過程中，Astro會將 JavaScript “注入”到組件中，使它們變成動態(tài)的。

Astro 歷史發(fā)展

Astro 是由 Fred Schott 和 Nate Moore 創(chuàng)建，最初用于構(gòu)建快速靜態(tài)內(nèi)容站點(diǎn)，如博客和落地頁等。它最初的獨(dú)特優(yōu)勢就是簡單易用?？梢詮母鞣N來源獲取內(nèi)容，包括 API、CMS、MDX 文件或 Markdown 文件，并在 Astro 站點(diǎn)上展示。

Astro 最初的設(shè)計(jì)并非與 React 或 Vue 等競爭，而是為了支持互操作性。簡而言之，就是可以在 Astro 中使用喜歡的工具！它提供了對 React、Vue、Svelte 和 Tailwind CSS 等前端工具的一流支持。

然而，Astro 真正的亮點(diǎn)是名為島嶼的前端架構(gòu)范式轉(zhuǎn)變。Astro的島嶼架構(gòu)能夠提高應(yīng)用的速度，它將 UI 拆分為更小的、隔離的組件，并在靜態(tài)頁面中部分啟動交互式組件，這是一個大膽的創(chuàng)新。

現(xiàn)在，Astro 已經(jīng)發(fā)展成一個現(xiàn)代 Web 框架，可用于構(gòu)建快速的多頁面應(yīng)用、動態(tài)服務(wù)器端點(diǎn)和注重內(nèi)容性能的網(wǎng)站。盡管保留了簡單性和核心功能，如服務(wù)器端點(diǎn)、內(nèi)容集合、視圖過渡以及出色的開發(fā)者體驗(yàn)，但 Astro 正不斷演進(jìn)，成為一個功能強(qiáng)大的現(xiàn)代Web應(yīng)用程序框架。

Astro 工作原理

Astro 的核心是其島嶼架構(gòu)。那么 Astro 中的島嶼是如何運(yùn)作的呢？這就不得不說它的島嶼架構(gòu)和部分水合了。

我們知道，客戶端和服務(wù)端是向用戶提供應(yīng)用的兩個主要參與者：

下面來看一個在客戶端上重新水合的服務(wù)端渲染的應(yīng)用的例子。

服務(wù)端渲染簡化的過程如下：

• 在服務(wù)端渲染應(yīng)用
• 在客戶端上重新水合整個應(yīng)用

這是描述部分水合作用的簡單方法。我們沒有對整個應(yīng)用進(jìn)行水合處理，而是專注于應(yīng)用的較小交互部分并獨(dú)立地對這些部分進(jìn)行水合處理：

Astro 島嶼就是嵌入靜態(tài)HTML頁面中的交互式UI組件。一個頁面上可以存在多個島。每個島都是通過獨(dú)立的部分水合方式進(jìn)行渲染。也就是說，每個島都是獨(dú)立水合的。

那這么做有什么好處呢？

通過利用島嶼，Astro 應(yīng)用可以具有出色的初始加載時(shí)間，而不會受到 JavaScript 的限制。大部分站點(diǎn)保持靜態(tài)狀態(tài)，只有在初始頁面加載之后需要時(shí)才會對交互部分或島進(jìn)行水合。

Astro 關(guān)鍵功能

上面介紹了Astro 的島嶼架構(gòu)和部分水合，下面來看看 Astro 的核心功能，以更有效的使用它。

組件

Astro 應(yīng)用的最小單位是組件。組件構(gòu)成了每個 Astro 應(yīng)用的基礎(chǔ)：

Astro 組件文件都以 .astro 結(jié)尾。

與大多數(shù)其他前端框架類似，組件內(nèi)的抽象程度由開發(fā)者自己決定。例如，組件可以是 UI 的一小部分可重用的組件，例如頁眉或頁腳，或者組件可以足夠大以構(gòu)成整個頁面或布局。

來看看下面的 Hello World Astro 組件：

// HelloWorld.astro 
---
const name = "前端充電寶"
---

<h1>Hello world, {name} </h1>

可以看到，Astro 包含兩個部分：組件腳本和組件模板

組件腳本是包含在 --- 虛線之間的部分，與 Markdown 前面的內(nèi)容塊相同。在腳本部分中，默認(rèn)情況下，可以編寫任何有效的 JavaScript 和 TypeScript！在上面的例子中，定義了一個 name變量：

---
const name = "前端充電寶"
---

組件模板就是定義組件 HTML 的地方。如果組件需要向?yàn)g覽器渲染一些 UI 元素或 HTML，可以在此處定義它。在上面的例子中，定義了以下內(nèi)容：

<h1>Hello world, {name} </h1>

Astro 組件模板決定了組件的 HTML 輸出并支持純 HTML！不過，Astro 組件模板語法是 HTML 的超集。它添加了強(qiáng)大的插值功能，因此可以充分利用 JavaScript 和 TypeScript 來編寫組件模板。

除了簡單的字符串插值之外，組件模板語法還支持很多功能，例如添加<style>和<script>標(biāo)簽、利用動態(tài)屬性、條件渲染、動態(tài)HTML等。以下是其中一些功能的演示：

---
const isActive = false 
---

<h1>前端充電寶</h1>

{/** 條件渲染 **/}
{isActive && <p>Hello World from 前端充電寶</p>}

{/** 樣式：默認(rèn)情況下樣式是有作用域的 **/}
<style>
 h1 {
   color: red, 
}

{/** 添加腳本 **/}
<script>
<!-- 也可以在此處編寫TypeScript。Astro 原生支持 TypeScript -->
const header = document.querySelector("h1")
header.textContent = "Updated LogRocket Header"
</script>

頁面和路由

Astro 應(yīng)用的入口點(diǎn)是頁面，它利用基于文件的路由方式來管理頁面。

假設(shè)正在構(gòu)建一個具有兩個不同路由的 Web 應(yīng)用：index.html 和 about.html，那該如何表示呢？

Astro 項(xiàng)目的 src/pages/ 子目錄中的每個文件對應(yīng)一個頁面。在這個例子中，需要兩個頁面 ：src/pages/index.astro 和 src/pages/about.astro：

在構(gòu)建應(yīng)用時(shí)，可以通過像npm build這樣的簡單命令來進(jìn)行構(gòu)建，index.astro和about.astro將被構(gòu)建成應(yīng)用中相應(yīng)的index.html和about.html文件。

Astro 是一個多頁面 Web 框架。也就是說，默認(rèn)情況下，每個路由都對應(yīng)一個單獨(dú)的 HTML 文檔。

可以按照以下步驟來嘗試使用 Astro：

• 通過運(yùn)行 npm create astro@latest 命令創(chuàng)建一個新的 Astro 項(xiàng)目。
• 按照終端中的提示設(shè)置新項(xiàng)目。
• 使用 astro dev 命令啟動應(yīng)用。
• 在代碼編輯器中打開項(xiàng)目。
• 查看 src/pages 目錄并創(chuàng)建兩個新頁面：index.astro 和 about.astro。
• 通過 astro build 構(gòu)建應(yīng)用。
• 查看構(gòu)建輸出并觀察兩個單獨(dú)的 HTML 文件——每個路徑一個。

在 Astro 中，不僅可以使用 .astro 組件作為頁面，還可以使用以下方式構(gòu)建頁面：

• Markdown 和 HTML 文件
• 安裝了 MDX 集成的 MDX 文件
• JavaScript 或 TypeScript 作為靜態(tài)文件或 API 端點(diǎn)

動態(tài)路由

上面我們討論了頁面和 HTML 輸出之間的一對一映射，不過，在 Astro 中也可以通過一個頁面處理多個路由。

Astro 頁面可以在文件名中指定動態(tài)路由參數(shù)，這將生成多個匹配的頁面。例如，構(gòu)建一個博客應(yīng)用，其中每篇博客都有自己的路由，可以通過以下方式表示該頁面：

src/pages/blogs/[blog].astro

注意，組件文件名中的方括號：[blog].astro。在靜態(tài)模式下，所有路由都必須在構(gòu)建時(shí)確定。因此，動態(tài)路由必須導(dǎo)出 getStaticPaths() 方法，該方法返回具有 params 屬性的對象數(shù)組。這告訴 Astro 在構(gòu)建時(shí)生成哪些頁面。

例如：

// src/pages/blogs/[blog.astro]
---
export function getStaticPaths() {
   return [
     {params: {blog: "how-to-learn-astro"}},
     {params: {blog: "how-to-learn-ai"}},
     {params: {blog: "how-to-learn-astro-ai"}},
  ]
}

// 可以從 Astro 全局對象中解構(gòu)參數(shù)
const { blog } = Astro.params 
--- 

<h1> Hello Blog, {blog} </h1>

當(dāng)構(gòu)建此應(yīng)用時(shí)，src/pages/blogs/[blog.astro] 將生成三個博客頁面：

• /blogs/how-to-learn-astro.html
• /blogs/how-to-learn-ai.html
• /blogs/how-to-learn-astro-ai.html

Astro 還支持服務(wù)端渲染，在這種情況下，路由是在運(yùn)行時(shí)而不是構(gòu)建時(shí)生成的。這意味著不需要指定 getStaticPaths() 方法，并且頁面可以大大簡化，如下所示：

// src/pages/blogs/[blog.astro]
---
// 可以從 Astro 全局對象中解構(gòu)參數(shù)
const { blog } = Astro.params 
--- 

<h1> Hello Blog, {blog} </h1>

在實(shí)踐中，使用SSR，這里的博客參數(shù)很可能是博客的唯一標(biāo)識符，例如 ID。當(dāng)用戶嘗試查看 /blogs/id 時(shí)，可以通過 Astro.params 獲取 id 并在服務(wù)端獲取所需的博客內(nèi)容。

布局

除了正常的組件和特殊的組件“頁面”，下面來了解另一種類型的組件：布局。

大多數(shù) Web 應(yīng)用都包含一些可重用的結(jié)構(gòu)，這些結(jié)構(gòu)為頁面提供了結(jié)構(gòu)，例如頁眉、頁腳和側(cè)面導(dǎo)航元素。這些可以被抽象為可重用的 Astro 組件，稱為布局。

可以通過在 src/layouts 目錄中添加 Astro 組件來創(chuàng)建布局組件：

在布局組件中，可以抽象公共組件并在任意應(yīng)用頁面中重用它們。

來看下面的布局組件：

// src/layouts/Main.astro
---
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    {/** 注意，下面使用了 <slot/> 標(biāo)簽 **/}
    <slot />
  </body>
</html>

可以在任何頁面中使用此組件：

---
import Main from '../layouts/Main.astro';
---

{/** 像渲染HTML元素一樣渲染 Main 組件：<Main></Main> **/}
<Main title="Home page.">
  <main> 
    <h1> Hello world, again </h1>
   <main>
</Main>

注意這里是如何使用布局組件的。在頁面組件的 HTML 部分中，渲染了布局組件，并將頁面的元素作為子元素傳遞給了<Main>組件。

可以通過在<Main>組件中添加一個<slot/>來渲染這個內(nèi)容。簡而言之，每個傳遞給<Main>布局組件的子元素都將被渲染到<Main>中的<slot/>中：

還可以通過提供 props 來提高 Astro 組件的可重用性。例如：

<Main title="Hello world" />
<Main title="Another title" />
<Main title="Hello again" />

上面的例子就是在布局組件渲染時(shí)將不同的標(biāo)題傳遞給它：

// src/layouts/Main.astro
---
const { title } = Astro.props;
---

<h1>{title} </h1>

主題和模板

Astro 在過去幾年中的增長很大程度上歸功于它的易于采用和開發(fā)。Astro 通過提供多樣化的模板，為工開發(fā)者快速啟動項(xiàng)目并編寫更少的代碼提供了極大的便利。

中間件

中間件在幫助 Astro 轉(zhuǎn)變?yōu)槌墒斓?Web 框架的過程中發(fā)揮了重要作用。

大多數(shù)全棧 Web 框架都有中間件實(shí)現(xiàn)，例如 NestJS。中間件位于客戶端請求和服務(wù)器應(yīng)用邏輯的其余部分之間，起到中心化邏輯的作用，例如身份驗(yàn)證、日志記錄、特性標(biāo)志等。

Astro 也提供了中間件，下面是 Astro 中基本中間件的結(jié)構(gòu)：

// src/middleware.js|ts
import { defineMiddleware } from "astro/middleware";
const middleware = defineMiddleware((context, next) => {
  // 在這里對請求進(jìn)行一些操作
  return next() // 不進(jìn)行任何操作，原樣轉(zhuǎn)發(fā)請求
});
export const onRequest = middleware;

為了類型安全，可以從 Astro 包中導(dǎo)入 MiddlewareResponseHandler 類型以及 defineMiddleware 實(shí)用程序。然后，通過 defineMiddleware 實(shí)用程序定義中間件變量：

const middleware = definedMiddleware(...)

最后，導(dǎo)出一個指向middleware的onRequest函數(shù)。

export const onRequest = defineMiddleware(...)

Markdown 和 Content Collections API

假設(shè)你正在構(gòu)建一個大型的內(nèi)容驅(qū)動應(yīng)用，這樣的項(xiàng)目預(yù)計(jì)會使用大量的Markdown、MDX、JSON或YAML文件。

組織項(xiàng)目內(nèi)容的最佳實(shí)踐是將內(nèi)容數(shù)據(jù)保存在數(shù)據(jù)庫中，可以在數(shù)據(jù)庫中驗(yàn)證文檔結(jié)構(gòu)并確保所需的內(nèi)容符合我們想要的數(shù)據(jù)模型。

使用此解決方案時(shí)，可以將它們表示為存儲在具有預(yù)定義架構(gòu)的數(shù)據(jù)庫中的數(shù)據(jù)集合：

在大多數(shù)靜態(tài)站點(diǎn)生成器中，驗(yàn)證本地模式是很困難的。Astro 通過其 Content Collections API （內(nèi)容集合）提供了強(qiáng)類型安全性，改變了這種情況。

內(nèi)容集合是 Astro 項(xiàng)目的 src/content 文件夾中的任何頂級目錄：

集合中的單個文檔被稱為集合項(xiàng)：

以這種方式組織大型內(nèi)容驅(qū)動的網(wǎng)站的好處在于，可以利用Astro的類型安全性來查詢和處理內(nèi)容集合。例如，可以為內(nèi)容集合引入一個模式，如下所示：

// ?? src/content/config.ts
// 從 astro:content 導(dǎo)入工具
import { z, defineCollection } from "astro:content";

// 定義一個或多個集合的類型和模式
const blogCollection = defineCollection({
  type: 'content',
  // 一個包含字符串類型的對象 - 標(biāo)題（title）、年份（year）、月份（month）和日期（day）
  schema: z.object({
    title: z.string(),
    year: z.string(),
    month: z.string(),
    day: z.string(),
  }),
});

// 導(dǎo)出一個單獨(dú)的 collections 對象以注冊集合。
// 鍵應(yīng)該與“src/content”中的集合目錄名稱匹配。
export const collections = {
  blog: blogCollection, // add the blog collection 
};

現(xiàn)在，src/content/blog 集合中的每一項(xiàng)都必須遵守此結(jié)構(gòu)。

下面來驗(yàn)證一下每個 Markdown 的標(biāo)題。例如，如果有以下內(nèi)容，就會收到 TypeScript 錯誤，因?yàn)椴粷M足我們定義的結(jié)構(gòu)：

<!-- src/content/blog/initial-blog.md -->

---
title="Hello World"
<!-- 缺少年份（year）、月份（month）和日期（day）的模式定義 --> 
--- 

# 前端充電寶
hello world！

無論 Astro 項(xiàng)目有多大，內(nèi)容集合都是組織內(nèi)容文檔、驗(yàn)證文檔結(jié)構(gòu)以及在查詢或操作內(nèi)容集合時(shí)享受開箱即用的 TypeScript 支持的最佳方式。

視圖轉(zhuǎn)換 API

清晰且炫酷的頁面過渡不僅可以增強(qiáng)用戶體驗(yàn)，還可以建立流動方向并突出展示了不同頁面之間元素的關(guān)系。這就是 View Transitions API 發(fā)揮作用的地方。

Astro的 View Transitions 是一組新的API，旨在使用 View Transitions 瀏覽器 API 原生地操縱頁面過渡。Astro 是第一個將 View Transitions 引入主流的重要 Web 框架。

要開始在 Astro 項(xiàng)目中使用 View Transitions API，只需導(dǎo)入 ViewTransitions。然后，在希望提供頁面轉(zhuǎn)換的源頁面和目標(biāo)頁面的頭部渲染組件：

// some-page.astro 
---
import { ViewTransitions } from "astro:transitions";
---

<head>
  <ViewTransitions />
</head>

// ...

ViewTransitions 負(fù)責(zé)將客戶端腳本添加到原始頁面，以攔截對其他頁面的點(diǎn)擊。

Astro 使用場景

說完了 Astro 的核心功能，下面來看看 Astro 的一些常見用例，如果需要開發(fā)內(nèi)容驅(qū)動的網(wǎng)站，低延遲是很重要的，Astro 就是一個很好的選擇。

博客、作品集

如果你的個人博客或作品集是一個靜態(tài)網(wǎng)站，那么使用 Astro 是一個明智的選擇。除了提高網(wǎng)站性能外，Astro 的組件化架構(gòu)還允許你在適當(dāng)?shù)奈恢幂p松地添加動態(tài)功能。

還可以集成 Markdown 以獲得更好的創(chuàng)作體驗(yàn)，并利用 Astro 的服務(wù)端渲染來保持 SEO 友好。簡而言之，如果要在 2024 年構(gòu)建靜態(tài)網(wǎng)站，Astro 是你的最佳選擇。

文檔站點(diǎn)

文檔站點(diǎn)通常具有大量內(nèi)容，Astro 在這方面表現(xiàn)出色。Astro 還有一個名為 Starlight 的專用文檔框架，可以快速啟動和運(yùn)行。如果需要一個干凈、直觀的文檔網(wǎng)站，可以快速加載以提供所需的信息，那么 Astro 是一個不錯的選擇。

Web 應(yīng)用

Astro 不僅限于靜態(tài)網(wǎng)站。理論上，它還可以為動態(tài) Web 應(yīng)用提供動力。

然而，在這方面需要小心。盡管可以輕松地使用React、Vue、Svelte等選項(xiàng)開發(fā)完整的Web應(yīng)用，但只有在確實(shí)有意義的情況下才應(yīng)考慮使用 Astro。

對于是否在全棧應(yīng)用中使用 Astro，應(yīng)該考慮：能否利用islands來提升應(yīng)用的性能？換句話說，是否想要構(gòu)建一個大部分是靜態(tài)的、具有按需加載的islands的多頁面應(yīng)用？

如果答案是肯定的，可以嘗試使用 Astro。

Astro vs Next.js

Astro 和 Next.js 都是現(xiàn)代 JavaScript 框架，旨在創(chuàng)建高性能的應(yīng)用。然而，Astro 最初是作為靜態(tài)站點(diǎn)生成器開發(fā)的，而 Next 最初是作為構(gòu)建具有狀態(tài)管理功能的豐富應(yīng)用的框架：

盡管 Astro 仍然是靜態(tài)網(wǎng)站的絕佳選擇，但它也努力縮小差距，以創(chuàng)建更多有狀態(tài)的應(yīng)用。然而，即使可以在 Astro 中渲染完整的 React 客戶端應(yīng)用，這并不一定意味著你應(yīng)該這樣做。

如果你的網(wǎng)站大部分是靜態(tài)的并且性能是優(yōu)先考慮的，可以考慮使用 Astro。如果正在構(gòu)建一個功能豐富、有狀態(tài)的應(yīng)用，Next 可能是更好的選擇。

值得注意的是，靜態(tài)和有狀態(tài)之間的區(qū)別可能并不總是很清楚。完全可以擁有一個混合了兩者的應(yīng)用。最終，框架的選擇取決于具體用例和業(yè)務(wù)要求。