用途:Astro 是面向内容型网站的 Web 框架,适用于博客、文档站、作品集、营销页和电商等以内容为主的站点。核心是岛屿架构:默认不向浏览器发送 JavaScript,仅对需要交互的组件按需水合。
主要能力:同一项目可同时使用 React、Vue、Svelte、Solid 等 UI 框架组件;基于文件的路由(.astro、.md、.mdx);内容集合(content collections)为 Markdown/MDX 提供类型安全与校验;支持 SSG 静态输出,也可通过适配器启用 SSR 或 hybrid 模式;.astro 组件样式默认作用域隔离。
使用方式:用 npm create astro@latest my-site 创建项目,进入目录后 npm install、npm run dev。按需添加集成,如 npx astro add tailwind、npx astro add react、npx astro add mdx、npx astro add sitemap、npx astro add vercel。.astro 文件顶部代码块仅在服务端运行,下方为模板;动态路由需在静态模式下提供 getStaticPaths。交互组件通过 client:load、client:visible、client:idle、client:media 等指令选择性水合。SSR 需在 astro.config.mjs 中设置 output 与 adapter,并用 export const prerender = false 让单页按需渲染。
限制与注意:未加 client: 指令的框架组件只输出静态 HTML,不会在浏览器执行;不要对所有组件使用 client:load,否则失去性能优势;静态模式下动态路由缺少 getStaticPaths 会导致构建失败;set:html 会绕过自动转义,渲染用户内容前需净化;仅 PUBLIC_ 前缀的环境变量会暴露给客户端,敏感值不应放入面向客户端的模板。具体收费、价格与平台支持情况暂未提供。