2024 年度回顾

引言

Astro 是一个非常适合内容驱动型网站的 Web 框架。其 Islands Architecture 允许您将静态页面与动态元素结合，在性能和交互性之间取得平衡。除此之外，您还可以利用 SSR、中间件 (middleware) 和端点 (endpoints) 来构建在服务器端运行的应用程序。

最近的更新特别强调了构建动态网站的功能，这预示着 Astro 正发展成为一个强大的全栈框架。要了解 Astro 的更详细介绍，请查阅官方的《Astro 为什么？》文档。

在这篇文章中，我将总结我认为 2024 年 Astro 生态系统中最重要的一些事件。我还会提及我所了解的 2025 年可能出现的一些情况。

如果您感兴趣，我还发表了本文的2023 年版（日语）。欢迎查阅，回顾 Astro 在 2023 年的进展。

项目健康指标

发布版本

截至 2024 年初，Astro 版本为 v4.0.8，而截至撰写本文的年底，v5.1.1 已经发布。包括测试版在内，2024 年总共有 169 个版本发布。这与 2023 年的 175 个版本发布数量几乎持平。

2023 年，主版本从 1 跳到 4，给人一种功能添加和改进步伐迅速的印象。2024 年，主版本仅从 4 升至 5，版本更新的步伐似乎有所放缓。

对于那些对每个版本细节感兴趣的人，可以在 GitHub 上查看 Astro 发布的完整列表。

GitHub 星标

根据 GitHub 星标历史，Astro 的 GitHub 星标在 2024 年初约为 37,000 个，到年底增至约 48,000 个。尽管这比 2023 年增加的 15,000 个略慢，但今年仍增加了 10,000 多个。可以说，Astro 的星标数量仍处于健康的上升趋势。

NPM 下载量

根据 npm trends 的数据，Astro 的每周下载量在 2024 年初为 185,902 次，截至 12 月 15 日攀升至 364,201 次。这大约是翻了一番，因此 Astro 在这方面也显然以稳定的速度增长。

JavaScript 现状

在 12 月发布的 2024 年 JavaScript 现状调查的“元框架”类别中，Astro 在以下方面排名第一：

• 兴趣度（听说过某个项目并对其持有积极看法的受访者比例）
• 留存率（使用过某个项目并对其持有积极看法的受访者比例）
• 好感度（表达过看法的受访者中，持有积极看法的比例）

此外，其使用率（使用过某个项目的受访者比例）今年从第四位上升到第二位，仅次于 Next.js。

Astro 在知名度（听说过或使用过某个项目的受访者比例）方面也攀升至第五位。

总体而言，所有指标要么是“比去年有所改进”，要么是“仍保持第一名”。根据 JavaScript 现状调查，2024 年可以被视为 Astro 取得突破性进展的关键一年。

新增和更新功能

内容层

内容集合 (Content Collections) 在 Astro 2.0 中引入，作为一种类型安全地处理用 Markdown 等编写的本地内容的方式。在 Astro 5.0 中，新增了 Content Layer API，以扩展内容的定义方式，使其在各种用例中更加灵活和强大。

以前，Astro 的内容集合只能处理位于预留的 src/content 目录中的本地内容，例如 Markdown 或 MDX 文件。

- src/content/
  - blog/
    - post-1.md
    - post-2.md

您的内容配置模式可以验证每个 Markdown 文件的 frontmatter，在使用 getCollection 函数检索到的内容数据时提供编辑器自动补全等功能。

通过 v5.0 中引入的全新 Content Layer API，您可以在保留验证和自动补全优势的同时，扩展内容的定义。例如，您现在可以使用新的 loader 属性将外部 API 数据“加载”为集合。

import { defineCollection, z } from "astro:content";

const countries = defineCollection({
  loader: () => fetch("https://api.example.com/countries").then(res => res.json()),
  schema: z.object({ /* schema definition here */ }),
});

export const collections = { countries };

在这个新的内容层下，type（您之前提供给 defineCollection 的属性）现在被视为遗留属性，而 loader 才是您指定数据加载方式的地方，这使得处理任何类型的数据源成为可能，而不仅仅是本地文件。

在 v5 中，您会获得两个用于本地内容的内置加载器：glob() 和 file()，这使得以下操作变得容易：

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* schema definition here */ }),
});

这个博客集合的行为类似于旧的基于本地文件的方法。同时，由于 loader 可以是任何函数，您还可以从外部 API 或数据库中拉取数据，甚至动态生成内容。

通过这种方式，新的内容层将 Astro 中内容的处理方式通用化，并允许您自由定义和分发自定义数据加载器，显著扩展了 Astro 在内容方面的能力。用于构建自定义加载器的 内容加载器 API 还附带了便捷功能，例如用于存储内容元数据的 meta 键值存储和用于存储渲染输出的 rendered 字段。

借助由 Content Layer API 支持的全新内容集合，您可以创建自己的加载器——如果效果不错，请将其发布为 npm 包，并在 集成库的“内容加载器”类别中与 Astro 社区分享！例如，Storyblok、Cloudinary 和 Hygraph 已经发布了自己的加载器，因此您可以直接从这些服务获取数据，而无需从头编写自己的加载器。

查看官方文档以了解更多关于内容集合的信息.

Astro Actions

Astro 已经提供了用于在服务器端处理 HTTP 请求的端点 (endpoints)。但在 v4.15 中，引入了 Astro Actions，以便更轻松地调用后端服务，减少样板代码并提高类型安全性。Astro Actions 的一些优势包括：

• 使用 Zod 自动进行输入验证
• 自动生成调用您的 action 的类型安全函数
• 通过 ActionError 类型和 isInputError 函数实现标准化错误处理

以下是您可能在 src/actions/index.ts 中定义 Action 的示例：

import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  // Define an action that takes a name and returns a greeting
  getGreeting: defineAction({
    // The schema for the input sent to this action
    input: z.object({
      name: z.string(),
    }),
    // The server-side handler for this action
    handler: async (input) => {
      return `Hello, ${input.name}!`; // input is validated and can be accessed type-safely
    }
  })
}

请注意，您看不到检查 Content-Type、执行输入验证等的代码。Astro Actions 处理了这些样板代码，因此您可以专注于核心业务逻辑。

然后，在客户端：

---
---

<button>Get greeting</button>

<script>
// Import the `actions` object that contains the `getGreeting` action
import { actions } from "astro:actions";

const button = document.querySelector("button");
button?.addEventListener("click", async () => {
  // Call the `getGreeting` action
  const { data, error } = await actions.getGreeting({ name: "Actions" });
  // Show the result in an alert if there's no error
  if (!error) alert(data);
})
</script>

通过从 astro:actions 导入 actions，您将获得一个用于调用 getGreeting action 的函数。由于您提供了 schema，您可以类型安全地调用 getGreeting。当然，您也可以在编辑器中将鼠标悬停在 action 上，查看其输入和返回类型，或者 cmd+click 跳转到其定义。

此外，您可以使用 isInputError 函数来检查 error 是否是验证错误，或者在您的 action 处理器中抛出 ActionError 来设置特定的 HTTP 状态码等。

从其名称来看，Astro Actions 受到了 React Server Actions (Functions) 的影响。两者都试图解决类似的问题，但 Astro Actions 似乎在开箱即用的验证和结构化错误处理方面更进一步。在 Astro 项目中，您可能不需要大量的服务器端通信，但您可以根据需要插入 Actions——例如，在博客文章中添加点赞功能。

查看官方文档以了解更多关于 Astro Actions 的信息.

服务端岛屿

一种名为 Server Islands (服务器群岛) 的新渲染方法已在 Astro 5.0 中引入。Astro 的 Islands Architecture 始终允许对页面的某些部分进行选择性水合 (selective hydration)，但现在 Server Islands 扩展了这一概念，让您可以在服务器上渲染页面的部分内容。以下是 Server Islands 最初发布时分享的图片：

如所示，您可以将服务器渲染的内容嵌入到静态页面中。静态部分可以由 CDN 缓存，而服务器渲染的部分在初始页面加载后才懒加载获取，这在保持快速初始加载速度的同时，增加了内容的灵活性。这种方法实现了传统 SSR 无法达到的性能水平。

要启用 Server Islands，您只需将 server:defer 指令添加到您的 Astro 组件中。例如，假设您有一个在服务器端获取用户头像的组件：

---
import { getUserAvatar } from "../sessions";
const userSession = Astro.cookies.get("session");
const avatarURL = await getUserAvatar(userSession);
---

<img alt="User avatar" src={avatarURL} />

在使用此组件的页面中，您只需添加 server:defer 指令：

---
import Avatar from "../components/Avatar.astro";
---

<!-- Other content here -->

<Avatar server:defer />

就是这样！页面是静态生成的，而 Avatar 组件则按需在服务器端渲染。此外，您还可以指定在服务器群岛加载期间显示的回退内容，类似于 React 的 Suspense。

---
import Avatar from "../components/Avatar.astro";
import GenericAvatar from "../components/GenericAvatar.astro";
---

<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>

如果您想深入了解 Server Islands 与 Astro 标准的预渲染 (Prerendering) 或按需渲染 (On-demand Rendering) 有何不同，请查阅我的文章（日语）。它比较了 Next.js 的渲染方法和 Astro 的 Server Islands，让您对现代渲染技术有更广泛的理解。

查看官方文档以了解更多关于 Server Islands 的信息.

Astro DB

2024 年 3 月，Astro 推出了用于数据库管理的 @astrojs/db 包。最初发布时，它旨在让生产环境连接到名为 Astro Studio 的托管数据库服务。截至目前，您可以连接到任何 libSQL 服务器。有关 Astro Studio 的更多信息，请参阅相关项目。

要使用 Astro DB，您首先需要在 db/config.ts 文件中定义您的表结构：

import { defineTable, column } from "astro:db";

const Author = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
  }
});

const Comment = defineTable({
  columns: {
    authorId: column.number({ references: () => Author.columns.id }),
    body: column.text(),
  }
});

export default defineDb({
  tables: { Author, Comment },
});

然后，在 db/seed.ts 中，导出一个用于填充数据库的函数：

import { db, Comment, Author } from "astro:db";

export default async function() {
  await db.insert(Author).values([
    { id: 1, name: "Kasim" },
    { id: 2, name: "Mina" },
  ]);

  await db.insert(Comment).values([
    { authorId: 1, body: "Hope you like Astro DB!" },
    { authorId: 2, body: "Enjoy!"},
  ])
}

当您启动开发服务器时，数据库会自动创建并填充。

数据库查询通过 Drizzle 客户端进行。从 astro:db 导入的 db 客户端会自动配置以连接到正确的数据库，因此您可以立即开始查询。

---
import { db, Comment } from "astro:db";

const comments = await db.select().from(Comment);
---

<h2>Comments</h2>

{
  comments.map(({ author, body }) => (
    <article>
      <p>Author: {author}</p>
      <p>{body}</p>
    </article>
  ))
}

通过 Astro DB，您可以将 Astro 简单的设置与 Drizzle 强大的查询功能结合起来，在您的 Astro 项目中管理数据库。尽管它似乎仍处于早期阶段，但 Astro DB 已经为需要数据库的小型功能提供了足够多的功能。在您的下一个项目中一定要考虑试用一下！

查看官方文档以获取 Astro DB 的更多详细信息.

astro:env

Astro 5.0 引入了 astro:env，这是一种类型安全地处理环境变量的新方法。使用 astro:env，您可以：

• 指定使用上下文（客户端或服务器），以明确变量的使用方式和位置
• 将变量标记为秘密，这样它们就不会暴露给客户端或内联到服务器构建中
• 指定变量是必需的还是可选的，并在服务器启动时验证必需变量是否已设置
• 定义变量类型，无需在应用程序中手动进行类型转换

您在 Astro 配置文件中定义环境变量 schema：

import { defineConfig } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      // ...
    }
  }
});

然后使用 envField 辅助函数定义字段：

import { defineConfig, envField } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      API_URL: envField.string({ context: "client", access: "public", optional: true }),
      PORT: envField.number({ context: "server", access: "public", default: 4321 }),
      API_SECRET: envField.string({ context: "server", access: "secret" }),
    }
  }
});

在这里，我们使用 context、access 和 optional 等选项来指定变量的属性，例如变量可访问的上下文、它是否是秘密以及它是否是可选的。变量类型通过 envField.string 或 envField.number 等辅助函数声明。

然后，您可以从 astro:env/* 导入并使用这些变量。

---
import { API_URL } from "astro:env/client";
import { PORT } from "astro:env/server";
import { API_SECRET } from "astro:env/server";
---

尽管它看起来像一个微小的功能，但环境变量在应用程序开发中常常是令人头疼的问题，因此拥有内置的、类型安全的方法非常有帮助。

查看官方文档以设置类型安全的环境变量.

请求重写

Astro 4.13 引入了请求重写 (Request Rewriting)，这是一项允许您提供不同路由而无需将客户端重定向到新页面的功能。这意味着浏览器 URL 保持不变，而服务器在幕后将请求重新路由到不同的路径，返回的结果就好像是对原始请求的响应一样。此功能对于您希望在多个路径显示相同内容而无需维护不同源文件等场景特别有用。

您可以通过在 Astro 组件中调用 Astro.rewrite 函数来使用重写功能：

---
return Astro.rewrite("/login")
---

或在中间件文件中：

import type { APIContext } from "astro";

export function GET({ rewrite }: APIContext) {
  return rewrite("/login");
}

有关请求重写的更多详细信息，请查看官方文档

• 路由
• 中间件
• Astro 渲染上下文

容器 API

容器 API (Container API) 在 2023 年 Astro 的项目路线图上处于第 2 阶段，现已在 Astro 4.9 中作为实验性功能实现。此功能使您能够独立于应用程序上下文渲染 Astro 组件，这与 React 中 react-dom/server 提供的各种方法非常相似。如果您有兴趣了解更多关于容器 API 的背景信息，请查看我去年撰写的文章以获取更多详细信息。

要使用容器 API，您首先需要创建一个容器（组件将被渲染的环境），并调用诸如 renderToString 或 renderToResponse 之类的方法：

---
import { experimental_AstroContainer } from "astro/container";
import Card from "../src/components/Card.astro";

const container = await experimental_AstroContainer.create();
const result = await container.renderToString(Card);
---

result 将包含 Card 组件渲染出的 HTML，您可以将其用于测试目的，例如检查它是否包含特定的预期字符串。有关如何使用容器 API 编写测试的参考，请查看官方示例项目，该项目演示了如何将容器 API 与 Vitest 结合使用。

除了 renderToString，还有一个 renderToResponse 方法，您可以通过各种选项传递 props 或 slot 数据。有关容器 API 的更多详细信息，请参阅官方文档。

在Astro Together 活动上，Matthew Phillips 进行了一场演示，展示了如何使用容器 API 将 Astro 组件（带 islands！）嵌入到 PHP 项目中，这令人印象深刻。务必也去看看！

相关项目

Astro Studio

Astro Studio 作为 Astro 的首个托管服务于 2024 年初推出，但不幸于 9 月宣布关闭。该文章解释说，Astro Studio 旨在：

1. 为所有 Astro 开发者提供一个经济实惠、高性能且易于使用，并与 Astro 无缝集成的 SQL 数据存储解决方案。
2. 建立一个可持续的商业模式，以支持 Astro 的持续开发和增长。

不幸的是，第二点未能如愿成功，最终导致了关闭 Astro Studio 的决定。

至于关闭时间表，如下所示：

• Astro Studio 的邀请将保持关闭。
• 现有用户在 2024 年 10 月 1 日之后将无法创建新数据库。
• 现有数据库在 2025 年 3 月 1 日之后将无法访问。
• 任何剩余的数据库将在 2025 年 3 月 1 日或之后不久被删除。

如果您正在使用 Astro Studio，请务必提前规划迁移到其他数据库服务。

与此同时，Astro DB 仍可在您的 Astro 项目中使用。在 v4.15 中，Astro DB 引入了对连接任何 libSQL 服务器的支持，因此您可以自托管 libSQL 服务器或使用像 Turso 这样的托管服务来继续使用 Astro DB。

Astro Storefront

Astro Storefront 是一个电子商务网站项目，展示了上面提到的许多 Astro 新功能，包括 Actions 和 astro:env。它代表了 Astro 当前的功能水平，是构建您自己的 Astro 项目的绝佳参考。Storefront 的源代码在 GitHub 上公开可用，相同的代码也用于生产环境，为 Astro 周边商店提供支持，您可以在那里购买 Astro 周边商品。

Astro 最初是一个静态网站生成器，但近年来它积极扩展其服务器端功能，现在能够构建具有动态内容的网站，如电子商务网站，而不会牺牲用户体验。Astro Storefront 很好地体现了这一趋势，2024 年 3 月，还发布了电子商务指南，以帮助您使用 Astro 构建自己的电子商务网站。

Astro Storefront 项目的 README 涵盖了设计决策等内容，因此结合代码本身，它是学习实际 Astro 开发技巧的好方法。如果您正在计划一个严肃的 Astro 项目，务必查看一下！

Astro 生态系统 CI

生态系统 CI (Ecosystem CI) 是一种用于维护软件生态系统整体质量的机制。它起源于 Vite 社区，主要由 dominikg 领导。

Vite 的生态系统非常庞大，新的库和工具不断涌现。另一方面，Vite 中任何意外的破坏性更改都可能产生巨大的连锁反应。生态系统 CI 通过在 Vite 更改时持续检查主要的生态系统包来帮助最大限度地降低这种风险，确保功能不会意外中断——或者如果中断，可以与包维护者协作及时修复。

生态系统 CI 已经超越 Vite，扩展到其他项目，例如：

• Vue: vuejs/ecosystem-ci
• Svelte: sveltejs/svelte-ecosystem-ci
• Nuxt: nuxt/ecosystem-ci
• Nx: nrwl/nx-ecosystem-ci
• Vitest: vitest-dev/vitest-ecosystem-ci
• Rspack: rspack-contrib/rspack-ecosystem-ci, rspack-contrib/rsbuild-ecosystem-ci
• Biome: biomejs/ecosystem-ci
• Oxc: oxc-project/oxlint-ecosystem-ci

现在 Astro 也加入了这一趋势，推出了自己的生态系统 CI 实现，可在 withastro/astro-ecosystem-ci 获取。

您可以在 https://github.com/withastro/astro-ecosystem-ci/actions 查看 CI 检查结果。每个工作流都有针对生态系统中包（例如 Starlight）的任务，它们测试构建、运行等，以确保与 withastro/astro 包的兼容性。

生态系统 CI 或多或少面向包开发者，因此如果您只是简单地使用 Astro，则无需担心。话虽如此，如果生态系统中的某个包突然出现问题，生态系统 CI 可以提供一些有用的见解，帮助您了解发生了什么。即使您不直接参与开源开发，理解生态系统 CI 的概念也可以帮助您维护内部开发包的稳定性，例如公司系统中使用的那些包。

Starlight

Starlight 是 2023 年发布的一个文档主题，现在已经度过了它的第一个周年。2024 年初的版本是 v0.15.2，现在已经更新到 v0.30.3，反映了其稳定的更新速度。例如，v0.21.0 引入了用于显示目录树的 <FileTree> 组件和用于显示步骤序列的 <Steps> 组件，而 v0.27.0 增加了对服务器端渲染的支持。

去年，Starlight 的采用率随着 Biome 和 Knip 等知名项目的采用而飙升，并且在 2024 年继续得到更多使用。一些示例包括：

• Cloudflare Docs
• jscodeshift（Meta 出品的代码重构工具包）
• Style Dictionary（亚马逊出品的设计令牌构建系统）
• vlt /vōlt/（由 isaacs 等开发的新包管理器）

Starlight 的 UI 支持多语言，使其非常适合任何语言的文档网站。如果您需要构建文档网站，务必考虑 Starlight。

Clack 和 Bombshell

2024 年 6 月，Astro 联合创始人 Nate Moore 宣布他将离开核心团队：

他指出，他现在将专注于 Clack，这是一个用于构建交互式 CLI 工具的框架。随后在 10 月份，他透露了 Bombshell，它将托管他未来的项目，包括 Clack。

Clack 提供了文本输入、多选、加载指示器等 CLI 组件，让您可以轻松构建交互式 CLI 应用程序。您可以在 https://www.clack.cc/ 查看演示，了解其功能。

文档仍在开发中，但 Clack 已经应用于一些备受瞩目的项目，包括：

• cloudflare/workers-sdk
• vuejs/vitepress
• t3-oss/create-t3-app
• aidenybai/react-scan

在 Bombshell 网站上了解更多关于 Bombshell 和 Clack 的信息，如果您想参与，可以加入他们的 Discord 服务器。

其他话题

Astro Together

2024 年 5 月 28 日，首次 Astro 线下聚会 Astro Together 在加拿大蒙特利尔举行。有一篇博客文章提供了该活动的总结和照片。

活动演讲可在 YouTube 播放列表中观看。演讲顺序是：Fred K. Schott 谈论 Astro 的现状与未来，Ben Holmes 演示 Astro Actions，Matthew Phillips 解释 Astro 4.10 的变化，以及 Sarah Rainsberger 谈论文档、Starlight 和 Astro 社区。

• 播放
• 播放
• 播放
• 播放
• 播放
• 播放

围绕此次活动还发布了几篇博客文章：

• 零 JavaScript 视图转换
• Astro 内容层
• 服务端岛屿

Bluesky

Astro 现在拥有自己的 Bluesky 帐户。Bluesky 提供了一项名为 “Starter Packs” 的功能，它将多个相关帐户捆绑在一个主题下，以便您可以一次性关注它们。Astro 有其官方 Starter Pack，让您可以轻松跟踪 Astro 相关人员。欢迎查阅！

Netlify 成为官方部署合作伙伴

Netlify 已成为 Astro 的官方部署合作伙伴。这意味着 Netlify 现在每月贡献 12,500 美元来支持 Astro 的开发。截至该公告发布时，Netlify 也被提及协助 Server Islands 的开发。Netlify 是部署 Astro 项目的流行选择，很高兴看到他们支持 Astro 的开发。

Netlify 也使用 Astro 来运行其开发者平台网站，这是 Astro 实际应用的另一个绝佳范例。

Google IDX 成为官方在线编辑器合作伙伴

Google IDX 现已成为 Astro 的官方在线编辑器合作伙伴。

Project IDX (Google IDX) 是一个类似于 StackBlitz 的在线开发环境。由于它由 Google 提供，因此可以与 Gemini 和 Google Cloud 集成。David East，该项目的 DevRel 负责人，与 Astro 的联系可以追溯到他在 Firebase 的时代，包括去年一个用 Astro 重建 Firebase 博客的项目。

通过这次合作，Google IDX 每月赞助 10,000 美元以支持 Astro 的发展。

Biome v1.6.0

Biome——一个用于 JavaScript、JSON、CSS 等的格式化和代码检查工具——在 v1.6 版本发布中添加了对 Astro 的部分支持。v1.6 还引入了对 Vue 和 Svelte 的部分支持。对于 Astro，目前只支持代码块内部的脚本部分 (---)。有关详细信息，请参阅 Biome 的语言支持页面。

Astro Storefront 也使用了 Biome，您可以查看它以获取实际示例。

Clerk Astro SDK

Clerk，一个用于用户身份验证的平台和组件库，于 2024 年 7 月发布了适用于 Astro 的 SDK。

我还没有使用过它，但根据公告，它提供了用于登录的 Astro 组件，以及用于在中间件中进行身份验证检查的 clerkMiddleware 函数等。Lucia 是另一个与 Astro 可用的知名身份验证库，但 Clerk 更像是一个端到端解决方案。拥有多种身份验证选项对生态系统来说是件好事。

如果您有兴趣在 Astro 项目中添加身份验证和授权，请参阅Clerk 的 Astro SDK 文档。

TutorialKit

TutorialKit 是 StackBlitz 开发的一款教程构建工具，它在底层使用了 Astro，并利用了 WebContainer API。它允许您创建完全在浏览器中运行的交互式教程。请查看 TutorialKit 演示，了解其功能。

您可以在其官方文档中了解更多关于 TutorialKit 的信息。它是一个非常棒的教程创建工具，如果您计划编写教程，务必尝试一下！

宜家 (IKEA), 保时捷 (Porsche)

Astro 现在被许多网站使用，包括宜家和保时捷等知名品牌：

Hej！欢迎来到宜家全球

保时捷

宜家的网站有效地利用了视图转换 (View Transitions)，使导航变得非常有趣。同时，保时捷的网站在 Astro 上运行 Vue，充分利用了 Islands Architecture。

这些只是众多示例中的两个，我确信还有更多我不知道的精彩 Astro 网站。如果您知道任何其他值得注意的 Astro 网站，请通过将其添加到 使用 Astro 的公司与网站来与 Astro 社区分享！

展望 2025

Astro 有一个公开的项目路线图 (Project Roadmap)，其中讨论了未来的开发计划。该路线图以四个阶段跟踪提案：

• 阶段 1：提案
• 阶段 2：接受的提案
• 阶段 3：RFC 与开发
• 阶段 4：发布！

因此，如果您想了解 Astro 的未来发展，请查看处于阶段 2 和 3 的内容。

您可以在 “公共路线图”项目下查看具体提案。截至撰写本文时，以下五个提案处于阶段 3：

• 容器 API：隔离渲染组件
• 内置 SVG 组件
• 字体
• 响应式图片
• 会话

下面我们来看一下其中一些提案。

会话

会话 (Sessions) 是一种临时存储用户特定数据（例如登录状态或购物车）的机制。到目前为止，您必须直接处理 cookie 或本地存储。新提案将允许您在 Astro 中原生处理会话。数据存储在服务器端，只有会话 ID 作为 cookie 发送到客户端，这有助于提高安全性。

会话已在 Astro 5.1 中作为实验性功能引入。要使用会话，您将使用 Astro.session 对象的 get 和 set 方法。会话在许多上下文中都可用，包括页面、组件、端点、actions 或中间件。以下是文章中演示如何在会话中检索和更新购物车数据的示例：

---
export const prerender = false;
const cart = await Astro.session.get("cart");
---

<a href="/cart">🛒 {cart?.length ?? 0} items</a>

import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  addToCart: defineAction({
    input: z.object({ productId: z.string() }),
    handler: async (input, context) => {
      const cart = await context.session.get("cart");
      cart.push(input.productId);
      await context.session.set("cart", cart);
      return cart;
    },
  }),
};

由于会话仍处于实验阶段，您必须使用 driver 设置明确指定数据存储位置。例如，以下是如何在部署到 Node.js 环境时指定文件系统驱动程序：

{
  adapter: node({ mode: "standalone" }),
  experimental: {
    session: {
      driver: "fs",
    },
  },
}

可用的驱动程序取决于您的生产环境。例如，您还可以使用 Cloudflare KV 或 Redis 的驱动程序。有关完整驱动程序列表，请参阅 unstorage 文档（Astro Sessions 内部使用该库）。

当会话脱离实验性状态后，计划是适配器本身将自动选择正确的驱动程序，因此您将来无需手动配置。如果您在试用后发现任何问题或有改进建议，请务必在提案的 PR 中分享您的反馈。

响应式图片

尽管图片是影响用户体验的关键因素，因此在 Web 开发中不可或缺，但处理它们可能相当具有挑战性。开发者必须考虑屏幕尺寸、分辨率和图片格式等因素，以确保图片在各种设备上正确显示。现有的 <Image> 组件确实提供了一系列选项来处理这些复杂性，但仍然需要开发者付出相当大的努力。

这项提案旨在引入一个 layout 属性，该属性将自动化生成 srcset 和 sizes，让开发者可以轻松遵循图片最佳实践。

它已在 Astro 5.0 中作为实验性功能提供，您可以查看实验性响应式图片文档以获取更多详细信息。

字体

字体是网页设计的基础，但 Astro 目前没有提供内置的处理方法。官方字体指南可以帮助您入门，但它仍然将字体托管位置、加载方式等许多决策留给开发者。这项提案旨在将字体最佳实践融入 Astro，让您在项目中更轻松地处理字体。

实现细节仍在讨论中，但您可以找到 Astro Fonts RFC，其中包含配置可能样式的示例。

总结

以上是我个人对今年 Astro 生态系统中发生的新功能和事件的概述。2024 年，我们看到了更多以应用程序为中心的增强功能，如 Actions 和 Server Islands，尽管目前尚不清楚这一方向是否会继续。即将推出的关于图片、字体和图标的实验性功能可能表明对内容驱动型网站中基本但通常困难的任务的开发者体验将进一步投入。我期待看到他们接下来会带来什么。

我希望这篇文章能启发您探索 Astro 的新功能，并尝试实验其可能性。非常感谢您阅读到这里！