Astro 5.0

作者
Erika
Matt Kane
Matthew Phillips

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 工具。或者，通过运行包管理器的安装命令进行手动升级。

# Recommended:
npx @astrojs/upgrade


# Manual:
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({
  // Load data from Markdown files on disk
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* optionally define a schema for type-safe data */  }),
});


const database = defineCollection({
  // Automatically fetch content in one line with a loader
  loader: notionLoader({ /* ... */ })
});


const countries = defineCollection({
  // Load data from anywhere!
  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 和动态的服务器生成组件。

在任何给定的网页上，您可能拥有以下类型的内容：

  • 完全静态且永不改变。
  • 由不经常变化但比您部署更频繁的数据库动态支持。
  • 为个人用户量身定制的个性化内容。

以前，您必须为所有这些类型的内容选择一种缓存策略，如果页面是登录体验，则通常意味着完全不缓存。现在，有了服务器岛，您将两全其美。

A diagram showing the server island population parts of the page from the server.

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

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

每个岛都独立加载，以优化访客体验。这意味着一个较慢的岛，例如连接到旧后端服务器的岛，不会延迟其他个性化内容的显示和交互。

服务器岛在过去几个月已可供测试。在此期间，我们听取了您的反馈，并通过以下方式增强了服务器岛：

  • 在岛内部设置标头，允许您自定义单个岛的缓存生命周期。
  • 在执行自动页面压缩的平台上使用服务器岛。
  • 通过使用在服务器上生成的密钥自动加密服务器岛属性，提高隐私性。

借助 Astro 5，我们正在 重新思考网站“静态”的含义 。服务器岛为您未来在 Astro 中构建静态项目提供了基础原语，仅在您需要的地方添加动态部分。

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

简化预渲染

自两年多前 Astro 1.0 发布以来，Astro 一直支持多种网站输出模式：静态模式，它在构建时一次性将网站构建成传统的静态 .html 文件；以及服务器模式，其中页面在运行时渲染，允许您构建高度动态的网站。

在收到许多请求后， 在 Astro 2.0 中，我们通过创建第三种输出模式：混合模式，使其更精细 ，该模式允许在同一网站中混合静态渲染和服务器渲染的页面。

随着 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（一周前刚刚发布）一起发布的框架之一。（别担心：我们一直在使用测试版，因此升级到 Astro 5 时您可能不需要更改任何代码。）

Vite 6 的亮点是新的环境 API，这是一项内部重构，允许创建新环境，使开发体验更紧密地与您的代码在生产环境中的运行方式保持一致。集成作者今天就可以开始使用这个新的 API；未来，我们希望找到在核心中使用它的方法，例如为 Cloudflare 用户提供更好的开发兼容性，或提供边缘运行时以进行本地测试。

要了解有关 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'
---


<!-- Pass width and height to override default size -->
<Logo width={100} height={100} fill="blue" />

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

错误修复与更多改进

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

感谢所有为本次发布做出贡献的开发者们

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