Astro 5.0 新特性解读：Content Layer 与 Server Islands

Astro 5.0 来了！这个版本带来了两个重量级特性：Content Layer 和 Server Islands。作为一个专注于内容驱动网站的框架，这次更新让 Astro 在静态站点生成和动态内容之间找到了完美的平衡点。

什么是 Astro？

如果你还不熟悉 Astro：它是构建内容驱动网站的最佳框架，包括博客、营销网站和电商网站。如果你需要一个加载快速、SEO 友好的网站，Astro 就是为你准备的。

Content Layer：内容管理的革命

从 Content Collections 到 Content Layer

自从 Astro 2.0 以来，内容集合（Content Collections）让我们能够以类型安全的方式组织静态内容。但是，随着网站增长，把所有内容都放在 Git 仓库的 Markdown 文件里变得越来越不实际：

你可能想使用 CMS
某些部分可能需要 REST API 驱动
图片可能来自 Cloudinary 这样的资源管理系统

这很快就会变成一团糟，需要各种 API 和数据获取策略。

Content Layer 的解决方案

Content Layer 带来了 Loader —— 可插拔的函数，从任何来源获取和转换数据：

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({ /* 可选的类型安全 schema */ }),
});

const database = defineCollection({
  // 一行代码从 Notion 获取内容
  loader: notionLoader({ /* ... */ })
});

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

export const collections = { blog, database, countries }

内置 Loader 和社区生态

Content Layer 提供：

内置 Loader：从磁盘任何位置加载内容
自定义 Loader：几行代码就能从任何 API 获取内容
社区 Loader：Storyblok、Cloudinary、Hygraph 等热门平台

性能提升

Content Layer 不仅带来了灵活性，还带来了显著的性能提升：

指标	提升幅度
Markdown 页面构建	高达 5x 更快
MDX 构建	高达 2x 更快
内存使用	减少 25-50%

Server Islands：静态与动态的完美结合

群岛架构的演进

Server Islands 是 Astro 推广的群岛架构概念的演进。它把这个理念扩展到了服务端：

静态内容：永不改变的缓存 HTML
动态内容：数据库支持，变化不频繁
个性化内容：针对每个用户定制

问题：之前的两难选择

以前，你必须为整个页面选择一种缓存策略。如果页面是登录体验，通常意味着完全不缓存。

Server Islands 的解决方案

现在，你可以两全其美：

---
import UserProfile from '../components/UserProfile.astro';
import ShoppingCart from '../components/ShoppingCart.astro';
---

<!-- 静态外壳，Edge CDN 缓存 -->
<main>
  <h1>欢迎来到我们的商店</h1>

  <!-- 动态岛屿：延迟加载 -->
  <UserProfile server:defer />

  <!-- 另一个独立加载的岛屿 -->
  <ShoppingCart server:defer>
    <!-- 加载前的回退内容 -->
    <div class="skeleton">加载中...</div>
  </ShoppingCart>
</main>

关键优势

独立加载：每个岛屿独立加载，慢速岛屿不会阻塞其他内容
缓存友好：静态外壳可以在 Edge CDN 缓存
回退内容：动态内容加载前显示占位符
隐私保护：自动加密服务器岛屿的 props

其他重要更新

简化的预渲染

Astro 5.0 消除了 Static、Hybrid、Server 三种输出模式的困惑：

默认静态：仍然生成静态 HTML 文件
按需渲染：只需添加 adapter，设置 prerender = false 即可
自动切换：Astro 会动态调整输出模式

类型安全的环境变量

新的 astro:env 模块：

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

// 类型安全、自动补全、编译时检查

功能包括：

客户端/服务端变量分离
密钥变量保护
必填/可选验证
类型定义（string、number、boolean、enum）

Vite 6

Astro 5 是首批搭载 Vite 6 的框架之一，带来了新的 Environment API。

实验性功能

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    responsiveImages: true,  // 响应式图片
    svg: true,               // SVG 组件
  }
});

响应式图片：

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

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

SVG 组件：

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

<Logo width={100} height={100} fill="blue" />

如何升级

# 推荐：自动升级
npx @astrojs/upgrade

# 手动升级
npm install astro
# 或
pnpm install astro

查看完整的升级指南。

总结

Astro 5.0 是一个里程碑式的发布：

特性	价值
Content Layer	统一的内容管理，任何来源，类型安全
Server Islands	静态缓存的性能 + 动态内容的灵活性
简化预渲染	不再纠结输出模式
astro:env	类型安全的环境变量
Vite 6	最新构建工具支持

如果你正在构建博客、文档站、营销网站或电商网站，Astro 5.0 值得一试。

Content-driven websites, evolved 🚀

参考链接

← Back to blog

Table of contents