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

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

# 什么是 Astro？

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

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 }

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

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

全新模块支持：

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

Astro 5.0 是首批搭载 Vite 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" />

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

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