Astro
面向内容网站的 Web 框架，默认发送更少的客户端 JavaScript。
项目概述
Astro 适合博客、文档、营销站和内容平台。它支持按需交互的 Islands 架构，并能混合使用 React、Vue、Svelte 等组件技术。
Astro 由核心团队和开源社区共同维护，并采用 MIT 许可证。Astro 组件会在构建时或请求时渲染成 HTML，组件脚本不会默认进入浏览器；只有显式标记的客户端 Islands 才会加载交互 JavaScript。项目既可以输出纯静态站点，也能借助适配器实现按需服务端渲染和 Server Islands。
主要特点
Astro 面向内容网站的核心架构与开发能力。
Islands 架构
页面主体输出为轻量 HTML，轮播、搜索或购物车等交互区域独立水合，避免整页发送单体 JavaScript 应用。
默认零客户端运行时
.astro 组件在服务端或构建阶段运行，组件脚本会从最终页面中移除，默认只向浏览器发送 HTML 与 CSS。
多框架兼容
可以在同一项目中使用 React、Vue、Svelte、Solid 等组件，并通过 client:* 指令精确控制何时加载。
内容集合
Content Collections 可从本地文件、CMS、API 或数据库加载结构化内容，并提供 Schema 校验、类型安全和编辑器提示。
灵活渲染模式
支持静态生成、按需服务端渲染和混合路由，并能用 Server Islands 延迟独立的个性化服务端区域。
内容开发工具箱
内置文件路由、Markdown/MDX、图片优化、视图过渡、数据获取和常用部署平台适配能力。
适用场景
当内容是主体、交互是局部增强时，Astro 通常能提供很好的开发与访问体验。
博客与文档
Markdown、MDX、内容集合和静态生成非常适合技术文档、知识库、博客与多作者内容。
营销与品牌网站
默认较少 JavaScript、图片优化和局部交互适合重视首屏速度、SEO 与品牌表现的站点。
新闻与内容平台
可从 Headless CMS 或 API 加载大量结构化内容，并通过静态或按需渲染平衡时效性与性能。
电商内容页面
商品详情主体可以静态或服务端输出，购物车、库存和个性化推荐则作为客户端或服务端 Islands。
渐进式迁移
允许继续使用已有 React、Vue 或 Svelte 组件，适合逐步重构旧内容站而不是一次性重写。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Astro 擅长的地方
- 默认只发送必要的 HTML、CSS 和局部交互 JavaScript
- 可按组件选择 client:load、client:idle、client:visible 等水合策略
- 不锁定单一 UI 框架，已有组件可以渐进复用
- 内容集合提供结构化内容、Schema 校验和端到端类型安全
- 静态生成、SSR、混合渲染和 Server Islands 可以按路由组合
需要注意
采用前应考虑的问题
如果绝大多数页面都依赖持续客户端状态、复杂即时交互和应用级路由，React 或 Vue 的完整应用框架可能更直接。
团队应明确哪些区域需要浏览器 JavaScript、何时水合以及如何通信，否则容易把所有组件都标记为 client:load。
独立 Islands 默认隔离运行，跨组件共享状态可使用浏览器事件、轻量 Store 或重新评估组件边界。
Astro 支持多个 UI 框架，但同时使用多个运行时会增加依赖、客户端体积和团队认知负担。
使用 SSR、Sessions、Actions 或 Server Islands 时，需要选择目标平台适配器并确认运行时能力。
快速开始
使用官方 create astro 向导和 TypeScript 创建一个最小内容网站。
bashnpm create astro@latest my-astro-site
cd my-astro-site
npm run devastro---
const projects = [
{ name: "Astro", description: "内容驱动的 Web 框架" },
{ name: "Svelte", description: "编译器驱动的 UI 框架" },
];
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>开源项目</title>
</head>
<body>
<main>
<h1>值得关注的项目</h1>
<ul>
{projects.map((project) => (
<li>
<strong>{project.name}</strong>
<p>{project.description}</p>
</li>
))}
</ul>
</main>
</body>
</html>bashnpx astro add react
npx astro add vue
npx astro add sveltebashnpm run build
npm run preview下一步：先用 Astro 组件和原生脚本完成静态内容；只有确实需要框架状态的区域才引入 React、Vue 或 Svelte，并根据优先级选择 client:load、client:idle 或 client:visible。
类似项目
同样适合内容网站、服务端渲染或静态生成的现代 Web 框架。
Astro vs Next.js
Astro 和 Next.js 都支持静态生成与服务端渲染，但 Astro 以内容优先和局部水合为核心，Next.js 更偏向完整的 React 应用平台。
| 比较维度 | Astro | Next.js |
|---|---|---|
| 核心定位 | 内容驱动的多框架 Web 框架 | 基于 React 的全栈应用框架 |
| 客户端 JavaScript | 默认不发送，仅显式 Islands 加载 | 按 React 组件边界与服务端/客户端组件模型决定 |
| 交互模型 | client:* 指令控制独立组件水合 | 客户端组件组成连贯的 React 应用树 |
| UI 框架 | 可混用 React、Vue、Svelte、Solid 等 | 以 React 为唯一核心 UI 层 |
| 内容能力 | Markdown、MDX 与 Content Collections 是核心能力 | 内容通常通过 MDX、CMS 或第三方内容层组织 |
| 动态能力 | SSR、Actions、Sessions 与 Server Islands | 服务端组件、Route Handlers、Server Actions 等完整能力 |
| 更适合 | 博客、文档、营销站和内容型电商 | SaaS、复杂交互产品和 React 全栈应用 |
如果页面大部分是内容，交互集中在少量组件，并希望默认发送更少 JavaScript，优先考虑 Astro；如果产品以持续客户端状态、复杂业务交互和 React 全栈能力为中心，Next.js 通常更合适。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Astro 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。