译：Astro 5.0

原文：https://astro.build/blog/astro-5/
译者：ChatGPT 4 Turbo

编者注：两个重量级功能，1）content layer，2）server islands。

介绍 Astro 5.0！ 带有 Astro 内容层来从任何来源加载您的内容，以及服务器岛屿来结合缓存的静态内容与动态的个性化内容。继续阅读以了解更多关于这些强大的新功能！

什么是 Astro？ Astro 是用于构建内容驱动型网站的 Web 框架，包括博客、营销和电子商务。如果您需要一个加载速度快且具有出色 SEO 的网站，那么 Astro 正适合您。

发布亮点包括：

访问 astro.new 可以直接在您的浏览器中尝试 Astro 5.0，或者要使用 Astro 5.0 开始一个新项目，请为您的包管理器运行 create astro 命令：

npm create astro@latest

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

# 推荐：
npx @astrojs/upgrade

# 手动：
npm install astro
pnpm install astro
yarn add astro

查看我们的升级指南获取完整细节和此版本每项更改的个别升级指导。

内容层

Astro 是内容驱动站点的最佳框架，有了 Astro 5.0，我们使其变得更好。Astro 内容层 是一种新的灵活且可插拔的方式来管理内容，提供了一个统一的、类型安全的 API 来定义、加载和访问您的 Astro 项目中的内容，无论它来自何处。

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
import { notionLoader } from "notion-astro-loader";

const blog = defineCollection({
  // 从磁盘上的 Markdown 文件加载数据
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* 可选地定义一个模式以实现类型安全的数据 */  }),
});


const database = defineCollection({
  // 通过加载器自动获取内容
  loader: notionLoader({ /* ... */ })
});

const countries = defineCollection({
  // 从任何地方加载数据！
  loader: () => fetch('https://api.example.com/countries').then(res => res.json()),
});

export const collections = { blog, database, countries }

自从 Astro 2.0 起，内容集合允许您将静态内容组织在类型安全的集合中，然后在站点的任何页面上使用它们。然而，随着您的站点增长，将内容存放在 Git 仓库中的 Markdown 文件中可能变得不太实用。您可能想使用一个 CMS，让您站点的某些部分由 REST API 驱动，或者使用来自像 Cloudinary 这样的资产管理系统的优化图像。这很快就变成一个难以管理的混乱，需要各种 API 和数据获取策略。

内容层是解决这一问题的方案，将您的所有内容带入一个友好的、类型安全的数据存储中，随时准备在您的站点中使用。它们是您所熟悉和喜爱的内容集合，但增加了 加载器 的额外力量 – 可插拔的函数，用于从任何来源获取和转换数据。有了内容层，您可以：

当您构建站点时，Astro 从所有这些来源加载数据，并将集合缓存到一个单一的、类型安全的数据存储中，您可以在页面中使用该存储。

内容层不仅让您从更多地方加载内容。它还对您当前站点的性能带来了巨大的提升。在 Astro 5 中，对于内容繁重的站点，Markdown 页面的内容集合现在构建速度提高了 5 倍，对于 MDX 则提高了 2 倍，同时内存使用量减少了 25-50%。

内容层是对内容集合处理方式的一大变革，但我们内置的向后兼容性意呴着大多数人无需对他们现有的代码做出任何改变。有关完整详情，请查看迁移指南。

要开始使用新的内容层来创建集合，请查看内容集合指南。

服务器岛屿

服务器岛屿是 岛屿架构概念的一种演变，这是 Astro 帮助推向主流的概念。服务器岛屿 将这一理念延伸到了服务器上。通过服务器岛屿，你可以在同一页面上结合高性能的静态 HTML 和动态服务生成的组件。

在任何给定的网页上，你可能会有内容：

  • 完全是静态的，永远不会改变。
  • 由数据库动态支持，变化不频繁，但比你部署的频率要高。
  • 个性化 内容，针对个别用户量身定做。

以前，你必须为所有这些类型的内容选择一种缓存策略，如果页面是登录体验，通常意味着根本不缓存。现在，有了服务器岛屿，你可以同时拥有最好的两个世界。

展示服务器岛屿从服务器填充页面部分的示意图。

服务器岛屿用于你最动态的内容：像用户的头像、他们的购物车和产品评论这样的个性化内容。当这些组件被延迟时，你可以更积极地缓存页面本身。

这意味着无论用户是否登录，都会立即看到页面最关键的部分，因为它们在 Edge CDN 上缓存。你还可以设置自定义的回退内容，在动态岛屿加载之前短暂显示。

每个岛屿独立加载，以优化访问者体验。这意味着一个较慢的岛屿，如与遗留后端连接的岛屿，不会延迟其余个性化内容的显示和交互。

过去几个月里，服务器岛已经提供了测试。在这段时间里，我们听取了您的反馈，并通过以下方式增强了服务器岛的功能：

  • 在岛内设置头部信息，让您能够自定义每个岛的缓存生命周期。
  • 在执行自动页面压缩的平台上使用服务器岛。
  • 通过使用服务器上生成的密钥自动加密服务器岛属性，增加隐私性。

随着 Astro 5 的发布，我们正在重新思考什么构成一个网站是“静态”的。服务器岛为您在 Astro 中构建未来的静态项目提供了一个基础原语，只在您需要的地方添加动态元素。

要了解更多关于服务器岛的信息，请查看服务器岛指南。

简化的预渲染

自从 Astro 的 1.0 版本发布以来，2 年多以前，Astro 支持网站的多种输出模式：Static，这会在构建时将网站构建成好的旧静态 .html 文件，以及 Server，页面将在运行时渲染，允许您构建高度动态的网站。

经过多次请求，在 Astro 2.0 中，我们通过创建第三种输出模式：Hybrid，使其更加细化，允许在同一个网站中混合使用静态和服务器渲染的页面。

随着 Astro 的发展和获得像 actions 或服务器岛这样的强大功能，这些功能无法在纯静态输出模式中使用，我们意识到“我需要使用什么设置来使用这个功能？”的选择矩阵变得庞大且难以解释和记录。我们还发现人们最终比他们需要的服务器渲染更多，因为使用细粒度控制比较简单，导致他们的网站比需要的慢。

在 Astro 5.0 中，我们很高兴地说我们简化了所有这些：**混合和静态选项已合并到默认的 static 选项中。**这现在允许您通过添加一个适配器在服务器上运行时渲染单个路由，无需其他配置。

不用担心，如果你仍然想要好旧的静态生成的 .html 文件，你仍然可以得到它们：Astro 默认仍然是静态的！但是，如果你设置其中一个页面为 prerender = false，Astro 现在会动态切换其输出模式，允许你使用需要服务器端渲染的功能，而无需弄清楚你需要哪种配置模式。

想要了解更多关于新的输出模式吗？查看我们的按需渲染的更新文档。

astro:env

配置你的应用程序是开发过程中的一个重要但复杂的部分。Astro 5 新推出的 astro:env 模块，为你提供了一种类型安全的方式来定义你的应用程序所期望和需要的环境变量。

使用 astro:env 你可以：

  • 配置你的变量是在 客户端 还是 服务器端 使用，以帮助区分不同用途。
  • 将变量指定为 秘密，比如你不想在客户端公开或者内联到服务器构建中的 API 密钥（任何能访问构建输出的人都可以查看到）。
  • 指定一个变量是 必需的 还是只是一个可选增强功能，允许你在服务器完全启动之前捕捉到错误。
  • 定义变量的 类型，比如字符串、数字、布尔值或枚举，避免了在应用程序中需要转换。

我们构建了 astro:env 以提供对环境变量更多的控制和结构，并为你提供类型安全性。一旦你定义了你的变量，你可以简单地在任何模块中导入并使用它们。

import { STRIPE_API_KEY } from 'astro:env/server';

要了解如何使用 astro:env 的更多信息，请参阅我们的关于类型安全的环境变量的指南。

Vite 6

Astro 5 是首批搭载 Vite 6 的框架之一，Vite 6 在一周前刚刚发布。（别担心：我们已经在使用 beta 版本工作了，所以当你升级到 Astro 5 时，你可能不需要更改任何代码。）

Vite 6 的亮点是一个新的环境 API，这是一个内部重构，它允许创建新环境以更贴近地将开发体验与代码在生产环境中的运行方式对齐。现在，集成作者可以开始使用这个新 API；在未来，我们希望找到方法在核心中使用它，比如为 Cloudflare 用户提供更好的开发兼容性，或为本地测试提供 Edge 运行时。

要了解更多关于 Vite 6 的信息，请查看他们的官方发布公告。

实验性功能

以下是我们在过去几个月中一直在研发的新实验性功能。通过启用一个 experimental 标志，它们现在可供预览，并将在未来的 Astro 5.x 的一个小版本中变为稳定版。

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    responsiveImages: true,
    svg: true,
  }
});

实验性：图片裁剪支持

现在，Astro 在使用其默认的 Sharp 图片服务进行图片处理时支持裁剪图片。

使用新的 fit 和 position 属性，您现在可以创建完美匹配其容器的图片，节省宝贵的字节。

---
import logo from "../logo.png";
---

<Image src={logo} fit="cover" width={200} height={200} />

要了解有关此功能的更多信息，请阅读我们关于实验性响应式图片的参考资料。

实验性：响应式图片布局

图片很棘手：有很多屏幕密度、很多屏幕尺寸……很多很多事情。让图片在所有设备上都看起来不错是一项挑战，更不用说向小屏幕提供 4K 图片的明显性能影响了。

Astro 最新的实验性图片功能支持设置预定义的响应式图片布局。这些将自动生成适当的 srcset 和 sizes 值，使您的图片在所有设备上看起来不错且表现良好。

---
import { Image } from "astro:assets"
import rocket from "./rocket.jpg"
---

<Image src={rocket} width={800} height={600} layout="responsive" />

有关此功能的更多信息，请访问我们关于实验性响应式图片支持的参考。

实验性：SVG 组件

是否曾希望在 Astro 中使用 SVG 更加容易？我们也是这么想的！还有什么比组件更符合 Astro 的风格呢？

通过 Astro 5 的实验性 SVG 标志，您可以导入 .svg 文件并像使用任何其他 Astro 组件一样使用它们。您可以传递诸如 width、height、fill、stroke 等属性，以及由原生 <svg> 元素接受的任何其他属性，以便自动应用它们：

---
import Logo from '../assets/logo.svg'
---

<!-- 传递宽度和高度以覆盖默认大小 -->
<Logo width={100} height={100} fill="blue" />

有关 SVG 组件及其使用方法的更多信息，请访问我们关于 SVG 组件的参考。

Bug 修复 & 更多改进

除了所有这些精彩功能之外，此次发布还包括许多较小的功能和错误修复。查看发布说明以了解更多。

感谢所有贡献者使这次发布成为可能：

我们希望你喜欢 Astro 5.0！如果你有任何问题或反馈，请随时通过 Bluesky、Twitter、Mastodon 或 Discord 联系我们。

2024年12月6日

In 好文翻译