Astro 是什么 - 技术栈

Astro 是一个面向「内容型网站」的 Web 框架,定位和 Next.js / Nuxt 类似,但设计目标相反:它假设你的页面大部分是静态内容,只有少数地方需要交互。博客、文档站、营销官网、个人主页是它的主场;后台管理、编辑器这类重交互应用不适合用它。

和我们熟悉的框架最大的区别: 默认零 JS

用 Vue/React 写页面,即使是一个纯展示的落地页,浏览器也要下载整个框架运行时 + 组件代码,再在客户端 hydrate 一遍。Astro 在构建时把组件渲染成纯 HTML,默认不向浏览器发送任何框架 JS。结果就是首屏快、Lighthouse 分数高、SEO 友好。

需要交互时:Islands 架构(群岛)

页面整体是静态的「海」,个别需要交互的组件是「岛」。你显式地给某个组件加指令,它才会被打包 JS 并 hydrate:

xml 复制代码

<Header />                    <!-- 纯静态,0 JS -->
<Carousel client:visible />   <!-- 滚动到可见才加载并激活 -->
<SearchBox client:load />     <!-- 页面加载即激活 -->

client:idle / client:media 等还能进一步控制加载时机。没标指令的组件永远是静态的。这跟 Vue/React 那种「整棵树都是活的」是根本不同的心智模型。

框架无关,可以复用现有技能

Astro 有自己的 .astro 组件语法(frontmatter 里写构建期 JS,下面写类 JSX 模板),但你可以直接在项目里用 Vue、React、Svelte、Solid 组件,甚至同一个页面混用。团队现有的组件库和熟练度不会浪费。想迁移一个现有 Vue 组件进来基本是拷进去就能用。

其他值得一提的Astro 特点

内容管理:内置 Content Collections,Markdown/MDX + 前置元数据 + TypeScript 类型校验,写文档和博客体验很好。
渲染模式灵活:默认静态生成(SSG),也支持 SSR、按路由混合、以及构建后按需渲染。
文档质量:社区公认的第一梯队,上手成本低。
适配主流部署平台(Vercel、Netlify、Cloudflare)都有官方 adapter。

一句话总结

如果这个页面 90% 是给人看的内容、10% 是交互,用 Astro 能让你几乎不写多余的 JS,同时还能继续用你熟的 Vue/React 写那 10%。如果是一个 90% 都在交互的应用,那还是老老实实用 Nuxt / Next。