国外超火的前端框架：Astro 5.0 正式发布！

Astro 5.0 带来了全新的 内容层 (Content Layer) 和 服务岛 (Server Islands) 功能，实现了从任意来源加载内容的能力，并将静态缓存内容与动态个性化内容完美结合，进一步提升开发效率和网站性能。

什么是 Astro？

Astro 是专注于构建内容驱动型网站（如博客、营销和电商）的现代 Web 框架，以快速加载和优秀的 SEO 表现为核心优势。

主要更新内容

1. 内容层 (Content Layer)

Astro 5.0 的内容层提供了一个灵活且可插拔的方式来管理内容，通过统一的类型安全 API，无论内容来源于 Markdown 文件、CMS、REST API 还是资源管理系统（如 Cloudinary），都可轻松加载并在项目中使用。

亮点功能：
- 支持从磁盘、本地文件或任意 API 动态加载内容。
- 使用第三方加载器（如 Storyblok、Cloudinary）直接集成内容。
- 内容集合构建速度提升，Markdown 页面快至 5 倍，MDX 提升 2 倍。

// 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 }

2. 服务岛 (Server Islands)

Astro 的服务岛扩展了静态与动态结合的页面架构：

支持缓存静态内容，同时加载个性化动态内容。
提供独立缓存和优化加载策略，增强用户体验。
自动加密服务岛的属性，提高隐私安全。

3. 简化的预渲染模式

Astro 5.0 合并了混合模式和静态模式，默认支持静态输出，并在需要时动态切换到服务器渲染模式，无需额外配置。

4. 类型安全的环境变量 (astro:env)

全新模块支持：

定义客户端或服务端使用的环境变量。
指定变量为秘密或可选，并通过类型定义确保安全和正确性。

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

5. Vite 6 集成

Astro 5.0 是首批搭载 Vite 6 的框架之一，提供更接近生产环境的开发体验。详情参考此前发布

6. 实验性功能

响应式图片裁剪与布局支持，提升图片加载性能。

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

export default defineConfig({
  experimental: {
    responsiveImages: true,
    svg: true,
  }
});
import logo from "../logo.png";
---

<Image src={logo} fit="cover" width={200} height={200} />
---
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'
---

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

快速开始

新项目：运行 npm create astro@latest
升级旧项目：
- 推荐：npx @astrojs/upgrade
- 手动：npm install astro

astro