使用方式
关于
使用 Astro 的岛屿架构、内容集合和多框架支持构建内容驱动网站。
name: astro-ops description: "Astro 框架模式、Islands 架构、内容集合、渲染策略和部署。适用于：astro、islands architecture、content collections、astro cloudflare、view transitions、partial hydration、astrojs、SSG、SSR、hybrid rendering、astro adapter。" license: MIT allowed-tools: "Read Write Bash" metadata: author: claude-mods related-skills: typescript-ops, tailwind-ops, javascript-ops
Astro 操作指南
Astro 框架开发的全面模式：Islands 架构、内容集合、渲染策略、视图过渡和多平台部署。
渲染策略决策树
选择哪种渲染策略？
│
├─ 内容主要是静态的（博客、文档、营销）？
│ ├─ 是 → 变更频率低于每天？
│ │ ├─ 是 → SSG（output: 'static'）
│ │ │ 最快 TTFB，CDN 可缓存，零运行时成本
│ │ └─ 否 → Hybrid（output: 'hybrid'）
│ │ 默认静态 + 按路由选择性 SSR
│ └─ 否 → 每个页面都需要个性化？
│ ├─ 是 → SSR（output: 'server'）
│ │ 每请求动态渲染，认证感知，实时数据
│ └─ 否 → Hybrid（output: 'hybrid'）
│ 静态外壳 + 动态部分的 server islands
│
├─ 应用需要实时交互（仪表盘、SPA）？
│ ├─ 是 → 是完整的客户端路由 SPA？
│ │ ├─ 是 → 考虑 React/Vue SPA，或 Astro + client:only
│ │ └─ 否 → Hybrid + Islands 架构
│ │ 静态页面中的交互式 islands
│ └─ 否 → SSG（output: 'static'）
│
├─ 构建时间问题（>10k 页面）？
│ ├─ 是 → Hybrid + 按需渲染
│ │ 预渲染热门页面，SSR 长尾页面
│ └─ 否 → SSG 可以处理
│
└─ 需要边缘计算（全球低延迟）？
├─ 是 → SSR + Cloudflare/Vercel Edge adapter
└─ 否 → SSR + Node adapter 或 SSG
配置
// astro.config.mjs
import { defineConfig } from 'astro/config';
// SSG (default) - all pages prerendered at build time
export default defineConfig({
output: 'static',
});
// SSR - all pages rendered on request
export default defineConfig({
output: 'server',
adapter: cloudflare(),
});
// Hybrid - static default, opt-in SSR per page
export default defineConfig({
output: 'hybrid',
adapter: cloudflare(),
});
---
// 在 hybrid 模式中，为特定页面退出预渲染：
export const prerender = false;
// 在 SSR 模式中，选择性预渲染：
export const prerender = true;
---
Islands 架构快速参考
| 指令 | 何时水合 | 发送的 JS | 使用场景 |
|-----------|--------------|------------|----------|
| client:load | 页面加载时立即 | 完整包 | 首屏交互（导航、hero CTA） |
| client:idle | 页面空闲后（requestIdleCallback） | 完整包 | 首屏下方交互（评论表单、聊天） |
| client:visible | 滚动到视口时 | 完整包 | 懒加载组件（轮播、地图） |
| client:media | 媒体查询匹配时 | 完整包 | 响应式组件（移动端菜单） |
| client:only="react" | 仅客户端（无 SSR） | 完整包 | 浏览器专用（canvas、WebGL） |
| 无指令 | 永不水合 | 零 JS | 纯展示组件 |
内容集合
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('blog', ({ data }) => !data.draft);
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<Content />
视图过渡
---
import { ViewTransitions } from 'astro:transitions';
---
<head>
<ViewTransitions />
</head>
附加资源
./references/islands-patterns.md- 高级 Islands 模式./references/content-collections.md- 内容集合完整指南./references/deployment.md- 多平台部署配置
兼容工具
Claude CodeCursorGitHub Copilot
标签
前端开发
