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

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

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

Astro 基本概念

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

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

Astro 歷史發(fā)展

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

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

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

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

Astro 工作原理

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

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

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

服務(wù)端渲染簡(jiǎn)化的過(guò)程如下：

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

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

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

那這么做有什么好處呢？

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

Astro 關(guān)鍵功能

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

組件

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

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

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

來(lái)看看下面的 Hello World Astro 組件：

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

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

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

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

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

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

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

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

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

---
const isActive = false 
---

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

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

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

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

頁(yè)面和路由

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

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

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

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

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

可以按照以下步驟來(lái)嘗試使用 Astro：

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

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

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

動(dòng)態(tài)路由

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

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

src/pages/blogs/[blog].astro

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

例如：

// 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 全局對(duì)象中解構(gòu)參數(shù)
const { blog } = Astro.params 
--- 

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

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

• /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() 方法，并且頁(yè)面可以大大簡(jiǎn)化，如下所示：

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

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

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

布局

除了正常的組件和特殊的組件“頁(yè)面”，下面來(lái)了解另一種類(lèi)型的組件：布局。

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

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

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

來(lái)看下面的布局組件：

// 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>

可以在任何頁(yè)面中使用此組件：

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

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

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

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

還可以通過(guò)提供 props 來(lái)提高 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 在過(guò)去幾年中的增長(zhǎng)很大程度上歸功于它的易于采用和開(kāi)發(fā)。Astro 通過(guò)提供多樣化的模板，為工開(kāi)發(fā)者快速啟動(dòng)項(xiàng)目并編寫(xiě)更少的代碼提供了極大的便利。

中間件

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

大多數(shù)全棧 Web 框架都有中間件實(shí)現(xiàn)，例如 NestJS。中間件位于客戶(hù)端請(qǐng)求和服務(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) => {
  // 在這里對(duì)請(qǐng)求進(jìn)行一些操作
  return next() // 不進(jìn)行任何操作，原樣轉(zhuǎn)發(fā)請(qǐng)求
});
export const onRequest = middleware;

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

const middleware = definedMiddleware(...)

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

export const onRequest = defineMiddleware(...)

Markdown 和 Content Collections API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# 前端充電寶
hello world！

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

視圖轉(zhuǎn)換 API

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

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

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

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

<head>
  <ViewTransitions />
</head>

// ...

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

Astro 使用場(chǎng)景

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

博客、作品集

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

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

文檔站點(diǎn)

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

Web 應(yīng)用

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

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

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

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

Astro vs Next.js

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

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

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

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