Astro：给现代网站准备的构建工具

Astro：给现代网站准备的构建工具

Astro 在 GitHub 上已经拿到 60.7K Star 了。

它是一个网站构建工具，主打的是"用更少的 JavaScript 交出更快的页面"。这年头前端框架都在往 bundle 里塞一堆运行时 JS，Astro 反过来走——能在服务端渲染完的全部在服务端搞定，客户端只留下真正的交互部分。

1、它解决了什么问题

大部分 React/Vue/Svelte 项目有个共同的问题：不管页面多简单，框架的运行时 JS 都得加载一遍。一个纯展示的博客页面，可能为了一个交互按钮加载了上百 KB 的框架代码。

Astro 的思路是"岛屿架构"。静态部分直接输出 HTML，没有任何 JS。只有页面上的独立交互组件（比如一个搜索框、一个轮播图）才按需加载对应的框架代码。最终结果就是页面加载快，JS 总量少。

2、上手门槛

Astro 对现有前端生态兼容得很好。React、Vue、Svelte、Solid、Preact 组件都可以直接放在同一个项目里用，一个页面里混着几个框架的组件都行。

创建一个新项目：

npmcreate astro@latest

单文件组件叫.astro，语法和 HTML 很像，在---之间写服务端逻辑代码，下面写模板。如果你写过 JSX，上手没难度。

3、生态和扩展

官方维护了超过 20 个集成包，覆盖了各种常见需求。Node.js 和 Vercel 适配器用来部署，Sitemap 自动生成站点地图，MDX 支持直接在页面里写 Markdown 组件，RSS 给博客站点生成订阅源。

文档站有专门的 Starlight 主题，基于 Astro 但开箱即用。

4、适合哪些人

• 做博客、文档站、营销页这类以内容为主的站点
• 想把 React/Vue 组件用在静态页面中但不想拖一堆 JS
• 觉得 Next.js 太重、想要更轻量替代方案的团队

Astro 的定位很明确——它不是要取代 React 或 Vue，而是让这些框架在合适的场景做合适的事。内容归内容，交互归交互，不混在一起打包带走。

而是让这些框架在合适的场景做合适的事。内容归内容，交互归交互，不混在一起打包带走。