Astro 5.0 Beta 版发布

首个 Astro 5.0 Beta 版现已推出！此版本包括现已稳定的 Astro 内容层（Astro 项目中内容管理的最新迭代），以及服务器岛（一种在您的网站上混合静态和个性化内容的新方式，兼顾两者的优点）。

继续阅读，了解 Astro 5.0 Beta 版中的新功能和改进！

此版本包括以下亮点

稳定：内容层
稳定：服务器岛
合并静态和混合输出模式
稳定：astro:env

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

# Recommended:
npx @astrojs/upgrade beta

# Manual:
npm install astro@beta
pnpm install astro@beta
yarn add astro@beta

要使用 5.0 Beta 版启动新项目，请为您的包管理器运行 create astro 命令

npm create astro@latest -- --ref next

查看 v5.0 Beta 文档中的升级指南，以获取此版本中每个更改的完整详细信息和单独升级指南。

稳定：内容层

Astro 5.0 引入了 Astro 内容层，这是一种在 Astro 项目中管理内容的新方式。内容层是一种灵活且可扩展的内容交互方式，它提供了一个统一的、类型安全的 API，借助强大的加载器，无论内容源自何处，您都可以在 Astro 项目中访问和定义您的内容。

随着您的网站增长，将内容保存在 Git 仓库中那些“古色古香”的 Markdown 文件中可能会变得越来越不切实际。您可能希望使用内容管理系统（CMS）。也许您网站的某些部分由某个 REST API 提供支持，或者您有来自 Cloudinary 等资产管理系统的优化图片。这会迅速变得难以管理，需要各种不同的 API 和数据获取策略。

内容层由加载器提供支持，这些加载器是可插拔的函数，它们从任何来源获取数据并将其转换为统一的、类型安全的格式，您可以在 Astro 项目中使用该格式，从而无论数据来自何处，您都可以完全放心地访问数据，因为您对其形状和类型充满信心。

import { defineCollection } from "astro:content";
import { notionLoader } from "notion-astro-loader";

const database = defineCollection({
  // Automatically fetch content from Notion in one line
  // using the 'notion-astro-loader' npm package!
  loader: notionLoader({ /* ... */ })
  // optionally, define a schema for the content or let the loader infer it
  // schema: z.object({ /* ... */ })
});

export const collections = {
  database,
}

这只是内容层为您的项目解锁的无限可能性中的冰山一角。本周请继续关注此功能的更多信息，并查看我们关于 v5.0 Beta 文档中新内容集合的指南，了解如何开始使用。

稳定：服务器岛

服务器岛是 Astro 5 中引入的一种新原语，它允许您将动态内容的渲染推迟到初始页面加载之后。这使您能够提供注入了个性化内容的静态页面，兼具两者的优点：快速、经 CDN 缓存的静态页面，以及个性化和动态内容。

服务器岛基于 Astro 中现有的岛屿架构。定义一个服务器岛与定义一个客户端岛一样简单，只需使用 server:defer 指令即可

<UserButton server:defer />

这会告诉 Astro 在初始响应中跳过渲染此组件，并将其渲染“推迟”到稍后。这使您可以将静态页面缓存在 CDN 后面，并带有初始占位符内容。当动态 HTML 加载完成后，一个小型内联脚本会将页面上的服务器岛替换为推迟渲染的 HTML 结果。

此功能对于在页面上混合动态和静态内容的内容驱动型网站特别有用。例如，对于电子商务网站，您可以将产品推荐的渲染推迟到初始页面加载之后，从而提供更快的初始页面加载时间，同时仍能提供个性化内容。

有关使用此功能的更多详细信息，请访问 5.0 Beta 文档中的服务器岛文档。

合并静态和混合输出模式

在 Astro 5 中，创建同时包含静态、缓存、高性能页面和按需渲染的动态页面的网站变得前所未有的简单。Astro 的新 output: 'static' 模式（默认模式）现在允许您仅通过添加适配器即可在服务器运行时渲染单个路由，无需其他配置。

这与我们之前的 hybrid 模式相同：默认情况下，每个页面都是静态生成的，直到您选择不进行预渲染

---
export const prerender = false; // Render at request time
---

如果您的大多数页面都应该按需渲染，您仍然可以在 Astro 配置中设置 output: 'server' 以默认使用服务器渲染。

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server'
});

一旦您准备好将网站部署到生产环境，Astro 将根据 prerender 常量和 output 配置自动为每个页面生成适当的输出。在 static 和 server 模式下，仍然需要适配器来提供按需渲染的页面，您可以像以前一样使用 astro add 将其添加到您的项目中。

有关 Astro 中预渲染和服务器端渲染的更多信息，请查看我们关于 5.0 Beta 文档中渲染模式的文档。

稳定：`astro:env`

如今，环境变量很难处理！随着项目的发展，很容易混淆哪些变量是必需的、哪些是可选的，和/或哪些是敏感的。Astro 5.0 引入了一种使用 astro:env 管理环境变量的新方式，这是一个内置模块，提供了类型安全的方式来定义和访问环境变量。

首先使用熟悉的模式语法在您的 Astro 配置中定义环境变量

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

export default defineConfig({
  env: {
    schema: {
      CLIENT_API_URL: envField.string({ context: "client", access: "public" }),
      SERVER_API_URL: envField.string({ context: "server", access: "public" }),
      API_SECRET: envField.string({ context: "server", access: "secret" }),
    }
  }
})

然后，在您的 Astro 项目中使用 astro:env 模块访问环境变量

---
import { SERVER_API_URL, API_SECRET, PORT } from "astro:env/server";

const data = await fetch(`${SERVER_API_URL}/api`, {
  headers: {
    Authorization: `Bearer ${API_SECRET}`
  }
})
---

<script>
  import { CLIENT_API_URL } from "astro:env/client";
  const clientData = await fetch(CLIENT_API_URL);
</script>

有关在 Astro 中处理环境变量的更多信息，请查看我们关于 5.0 Beta 文档中类型安全环境变量的指南。

稳定：内容层

稳定：服务器岛

合并静态和混合输出模式

稳定：astro:env

更多内容！

稳定：`astro:env`