Astro 默认零 JS
交互式岛屿仅在需要时加载 JS。对于博客和文档：即时加载，完美的 Lighthouse 分数。
内容集合
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
publishedAt: z.date(),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
})
export const collections = { blog }
---
export async function getStaticPaths() {
const posts = await getCollection('blog', ({ data }) => !data.draft)
return posts.map(post => ({ params: { slug: post.slug }, props: { post } }))
}
const { Content } = await Astro.props.post.render()
---
<article><Content /></article>
岛屿架构
<StaticHeader /> <!-- 0 KB JS -->
<ReactCounter client:visible /> <!-- 可见时加载 -->
<VueSearch client:load /> <!-- 立即加载 -->
<SvelteCart client:idle /> <!-- 浏览器空闲时加载 -->
视图过渡
---
import { ViewTransitions } from 'astro:transitions'
---
<head><ViewTransitions /></head>
<h1 transition:name="post-title">Title</h1>
| 指标 | Astro | Next.js App Router |
|---|---|---|
| JS 首页 | 0 KB | 87 KB |
| Lighthouse | 100 | 91 |
-> 使用 JSON Viewer 验证 schema。