Astro 5.0 发布 - 技术栈

Astro 5.0 发布！

使用 Astro Content Layer 可以从任何来源加载内容，并使用 Server Islands 将缓存的静态内容与动态个性化内容结合起来。

什么是 Astro

Astro 是用于构建内容驱动网站（包括博客、营销和电子商务）的 Web 框架。如果您需要一个加载速度快且 SEO 出色的网站，那么 Astro 就是您的最佳选择。

Astro 5.0 新特性

Content Layer (内容层)
Server Islands (服务器孤岛)
Simplified prerendering (简化的预渲染)
Type-safe environment variables (类型安全的环境变量)
Vite 6
Experimental features (实验性功能)

访问 astro.new 直接在浏览器中尝试 Astro 5.0 ，或者要使用 Astro 5.0 启动新项目，请为包管理器运行 create astro命 令：

bash 复制代码

npm create astro@latest

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

bash 复制代码

# Recommended:
npx @astrojs/upgrade

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

请查看我们的升级指南，了解此版本每次更改的完整详细信息和单独升级指南。

Content Layer (内容层)

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

ts 复制代码

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

const blog = defineCollection({
  // 加载本地文件数据
  loader: glob({ pattern: '**/*.md', base: './src/data/blog' }),
  schema: z.object({
    /* 可以选择定义类型安全数据的模式 */
  })
});

const database = defineCollection({
  // 使用 loader 自动请求远程内容，如 使用 notionLoader 获取 notion 数据
  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 和数据获取策略。

Content Layer 就是解决这一问题的方法，它将所有内容放入一个友好的、类型安全的数据存储中，以便在您的站点上使用。它们是您熟悉和喜爱的内容集合，但具有加载器的额外功能 - 可从任何来源获取和转换数据的可插入函数。通过内容层，您可以：

使用内置 loader 加载本地文件。
定义您自己的加载器，只需几行代码即可从任何 API 获取内容。
使用数量不断增加的社区构建和第三方加载器之一从 Storyblok 、 Cloudinary 或 Hygraph 等流行来源获取内容。

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

Content Layer 不仅仅让您从更多位置加载内容。它还为您当前站点的性能带来了巨大的改进。在 Astro 5 中，内容丰富的网站上的 Markdown 页面的内容集合构建速度提高了 5 倍 ，MDX 的构建速度提高了 2 倍 ，同时内存使用量减少了 25-50%。

Content Layer 是对内容集合处理方式的重大改变，但我们内置的向后兼容性意味着大多数人无需对现有代码进行任何更改。有关完整详细信息，请参阅迁移指南。

要开始使用新内容层进行集合，请查看内容集合指南。

Server Islands (服务器孤岛)

服务器岛是 Astro 帮助将岛屿架构概念推向主流的演变。服务器岛 将同样的想法扩展到服务器。通过 Server Islands ，您可以在同一页面上组合高性能静态 HTML 和动态服务器生成的组件。

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

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

以前，您必须为所有这些类型的内容选择一种缓存策略，如果页面是登录体验，通常意味着根本不需要缓存。现在，有了 Server Islands ，您就可以两全其美。

Server Islands 用于存储动态的内容：个性化内容，例如用户的头像、购物车和产品评论。当这些组件被推迟时，您可以更积极地缓存页面本身。

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

每个岛屿都独立加载，以优化游客体验。这意味着速度较慢的孤岛（例如连接到旧后端的孤岛）不会延迟其余个性化内容的显示和交互。

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

设置岛的 headers ，允许你自定义单个岛的缓存生命周期。
在执行自动页面压缩的平台上使用 server islands。
通过使用服务器上生成的密钥自动加密 server island props 来提高隐私性。

通过 Astro 5 ，我们正在重新思考网站"静态"的含义。服务器岛为您将来如何在 Astro 中构建静态项目提供了基础原语，仅在需要时才使用动态位。

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

Simplified prerendering (简化的预渲染)

自从两年多前的 Astro 1.0 版本发布以来，Astro 就支持网站的多种输出模式：静态，在构建时将网站构建为良好的旧静态 .html 文件，以及服务器，其中页面在运行时呈现，允许您构建高度动态的网站。

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

随着 Astro 的发展并获得了强大的功能，如 action 或 server islands ，这些功能不能在纯静态输出模式下使用，我们意识到"我需要哪些设置才能使用此功能？"的矩阵。变得庞大且难以解释和记录。我们还发现，人们最终进行的服务器渲染超出了他们的需要，因为这比使用细粒度的控件更容易，从而使他们的网站速度比他们需要的要慢。

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

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

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

astro:env (环境变量)

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

使用 astro:env 您可以：

配置您的变量是在 客户端 还是 服务器 中使用，以帮助细分不同的用途。
将变量指定为 Secrets ，例如您不想在客户端中公开或内联到服务器构建中的 API 密钥（任何有权访问构建输出的人都可以查看）。
指定变量是必需的还是只是可选的增强功能，以便您在服务器完全启动之前捕获错误。
定义变量的类型，例如字符串、数字、布尔值或枚举，从而无需在应用程序中进行强制转换。

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

js 复制代码

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

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

Vite 6

Astro 5 是首批与 Vite 6 一起发布的框架之一，一周前刚刚发布。（不用担心：我们一直在使用测试版，因此您在升级到 Astro 5 时可能不需要更改任何代码。）

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

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

Experimental features (实验特点)

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

ts 复制代码

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

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

Experimental: Image cropping support (实验：图像裁剪支持)

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

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

js 复制代码

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

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

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

Experimental: Responsive image layouts (实验：响应式图像布局)

图像很困难：有很多屏幕密度、很多屏幕尺寸......很多很多东西。让图像在所有设备上看起来都很好可能具有挑战性，更不用说在小屏幕上提供 4K 图像的明显性能影响。

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

astro 复制代码

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

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

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

Experimental: SVG Component (实验：SVG 组件)

您是否曾希望在 Astro 中更轻松地使用 SVG？我们也是！还有什么比组件更 Astro 的呢？

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

astro 复制代码

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

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

有关 SVG 组件以及如何使用它们的更多信息，请访问我们有关 SVG 组件的参考。

Bug Fixes & more improvements (错误修复和更多改进)

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