Astro 5.1 | Astro 框架

Astro 5.1 现已发布！作为 Astro 5 时代的第一个小版本，它恰逢假期推出，包含了全新的实验性会话功能、改进的图像缓存以及用于 Astro Actions 的额外工具。

它带来的新特性包括

实验性功能：会话
远程图像缓存
getActionPath 辅助函数

要升级现有项目，请使用自动化的 @astrojs/upgrade CLI 工具。或者，通过运行包管理器的升级命令来手动升级

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

实验性功能：会话

如果您曾使用 Rails 或 Laravel 等框架构建应用程序，那么您可能对会话（sessions）很熟悉：它是一种在用户浏览您的网站时，跟踪登录状态、闪现消息或购物车等每用户数据的简单方式。会话允许您安全地存储与特定用户关联的临时数据，无需客户端存储。目前，您可能将数据存储在 Cookie 或本地存储中，但这可能不安全或繁琐，或者存在数据存储量的限制。

会话的工作原理是将数据存储在服务器上，然后仅将一个会话 ID 作为 Cookie 发送给客户端。之后，您可以在 Astro 页面和组件、API 端点、Astro Actions 和中间件中 获取 (get) 和 设置 (set) 会话数据。它们的 API 和数据是相同的。

在 Astro 组件和页面中，您可以通过 Astro.session 访问会话对象

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

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

同样的会话数据在您的 Astro Actions 中可用

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;
    },
  }),
};

会话适用于按需渲染的页面，或者与服务器岛屿完美结合，让您可以在静态网站中点缀个性化内容岛屿。

---
import CartButton from '../components/CartButton.astro';
---
<CartButton server:defer />

驱动程序

Astro 会话由 unstorage 驱动程序提供支持，这些驱动程序是 Astro 用于存储会话数据的模块。Unstorage 支持数十种提供商，为您存储用户数据提供了多种选择。

当会话成为稳定功能时，Astro 的官方适配器将自动配置一个默认驱动程序。但在实验阶段，您必须自行为您选择的适配器配置一个 driver。您也可以使用跨平台驱动程序，例如 Upstash 或 Redis。

用法

要尝试实验性会话，请将 experimental.sessions 标志添加到您的 astro.config.mjs 文件中

此示例展示了如何启用文件系统驱动程序，它与 Node.js 适配器兼容

  {
    adapter: node({ mode: 'standalone' }),
    experimental: {
      session: {
        // Required: the name of the Unstorage driver
        driver: "fs",
      },
    },
  }

有关更多信息，请参阅此实验性标志的会话文档。我们也非常感谢您对该功能的反馈。有关更多详细信息，以及提供反馈并参与该功能的开发，请参阅会话 RFC。

远程图像缓存

您已经熟悉并喜爱内置的 <Image /> 组件，它可以通过自动调整大小和优化来显示优化后的图像。虽然此组件目前可以转换本地和远程图像，但构建之间的图像缓存仅限于本地图像。

现在，Astro 也会缓存远程图像，从而减少每次构建时重新下载和转换图像的需求。它使用带有条件请求的 If-Modified-Since 或 If-None-Match 标头来判断图像是否仍然是最新的，并且除非源图像发生更改，否则将使用缓存的版本。

此功能现已为所有网站启用，并适用于任何支持条件请求的主机。有关详细信息，请参阅新的资产缓存文档。

特别感谢贡献此功能的 @oliverlynch！

`getActionPath` 辅助函数

使用 Astro Actions 就像调用 actions.like() 或 actions.addToCart() 一样简单。但有时您需要知道某个 Action 的 URL，以便可以使用自定义请求头进行 fetch() 请求，或者使用 navigator.sendBeacon() 等 API。

Astro 5.1 引入了一个新的辅助函数 getActionPath()，让您在调用 Action 时拥有更大的灵活性。

需要授权这些“赞”吗？调用您的 like Action，传入 Authorization 请求头和 keepalive 选项

<script>
import { actions, getActionPath } from 'astro:actions'

await fetch(getActionPath(actions.like), {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({ id: 'YOUR_ID' }),
  keepalive: true
})
</script>

有关更多信息，请参阅新的 getActionPath() 文档。

错误修复

自 Astro 5 发布以来，我们收到了大量宝贵的反馈，并一直在努力修复您报告的问题。有关 Astro 5.0 以来所有修复的详细信息，请参阅更新日志。

感谢 Florian Lefebvre (@florian-lefebvre)、@oliverlynch、Sarah Rainsberger (@sarah11918)、Yan (@yanthomasdev)、Emanuele Stoppa (@ematipico) 以及所有为本次发布做出贡献的人。也感谢所有使用 Astro 并分享反馈的朋友。我们很高兴看到您用 Astro 5.1 打造出什么！