Astro

Astro 是专为内容驱动型网站设计的 Web 框架，通过群岛架构实现零 JS 默认输出，仅在需要时加载交互组件，在静态生成与按需渲染之间提供灵活选择。

核心架构与渲染策略

Astro 的群岛架构是其区别于 Next.js、Nuxt 等框架的关键：页面默认输出纯 HTML 与 CSS，交互组件（如 React、Vue、Svelte）以独立“岛屿”形式嵌入，各自加载自己的 JS，互不阻塞。渲染方面支持静态生成（SSG）、服务端渲染（SSR）与按需渲染（On-demand Rendering），可在同一项目中混合使用。

• 服务器群岛: 在 SSR 模式下将交互组件隔离为独立流式片段，提升首屏加载速度
• 视图过渡动画: 内置 View Transitions API 支持页面间平滑动画，无需额外库

内容管理与生态集成

Astro 原生支持 Markdown 与 MDX，并通过内容集合（Content Collections）提供类型安全的文件管理——在 src/content/ 下定义 schema 后，编辑器可获得自动补全与校验。官方集成覆盖 CMS、部署平台、后端服务与图像托管等场景。

• 内容集合: 基于 Zod 定义 schema，自动生成 TypeScript 类型，支持集合间 Intellisense
• CMS 集成: 提供 40+ 无头 CMS 适配器，包括 Contentful、Sanity、Strapi、WordPress 等
• 部署适配: 官方适配器覆盖 Cloudflare、Netlify、Vercel、Node、Deno 等 20+ 平台
• 图像优化: 内置 @astrojs/image 服务 API，支持自动格式转换与响应式图片

上手路径与学习资源

官方提供从零开始的博客搭建教程，分为 6 个单元：前期准备、页面、组件、布局、Astro API、群岛架构。教程基于项目实践，每一步都有可运行的代码示例。此外，文档包含完整的配置参考、CLI 命令、运行时 API 与故障排除方案。

• 快速启动: 使用 npm create astro@latest 创建新项目，支持 CLI 向导或从 GitHub 仓库克隆
• 迁移指南: 提供从 Next.js、Gatsby、Hugo、Jekyll、WordPress 等 14 个框架的迁移步骤
• 操作方案: 覆盖 Docker 构建、动态导入图片、RSS 摘要、i18n 添加、表单构建等 30+ 实战场景

扩展性与自定义能力

Astro 的集成系统允许通过官方或社区插件扩展功能，例如添加 React 组件支持、集成 Partytown 处理第三方脚本、使用 Tailwind Typography 美化 Markdown 渲染。开发者还可创建自定义集成、适配器、渲染器与内容加载器。

• 集成 API: 支持编写自定义集成，可操作构建流程、注入脚本、修改配置
• 渲染器 API: 允许接入任意 UI 框架，官方已支持 React、Vue、Svelte、Solid、Preact、Alpine
• 内容加载器 API: 可从外部 API 或数据库加载内容，替代本地文件集合

常见问题

Q1：Astro 与 Next.js 在内容型网站上的核心区别是什么？

A1：Astro 默认输出零 JS 的静态 HTML，交互组件以“群岛”形式按需加载，而 Next.js 默认输出 React 组件及其运行时 JS。对于博客、文档站等内容为主、交互较少的网站，Astro 的产物体积通常更小，加载更快。

Q2：Astro 的内容集合如何保证类型安全？

A2：在 src/content/config.ts 中使用 Zod 定义集合的 schema（如标题、日期、标签的字段类型），Astro 会自动生成 TypeScript 类型，并在编辑器中提供字段补全与类型校验，避免运行时因字段缺失或类型错误导致的问题。

Q3：Astro 支持哪些部署平台？

A3：官方提供适配器的平台包括 Cloudflare、Netlify、Vercel、Node、Deno、AWS（含 Flightcontrol 与 SST）、Azure、Google Cloud、Firebase、GitHub Pages、GitLab Pages、Heroku、Railway、Render 等 20 余种，覆盖主流 serverless 与边缘计算环境。

更多同类工具与网站,可在其他框架分类继续挑选。

信息核实于 2026年7月,具体以官网为准。