Astro

Astro 是一种面向内容站点的框架：构建阶段默认输出 HTML，页面不带 JavaScript，需要交互的组件再按岛屿（islands）方式在浏览器里加载，同一页面可以混用多种框架的组件^[1]。它还内置内容集合与内容管理系统接口，静态生成与服务端渲染两种模式都能用^[2]。

内容站点选它的理由

默认产物是静态 HTML，抓取不需要执行脚本；同时交互组件按需加载，页面不必为了一个按钮把整套运行时发给浏览器^[1][3]。加载与交互两项指标都因此受益^[4]。

内容集合给 Markdown 与数据加类型约束，文章的字段（标题、摘要、日期、图片替代文本）可以在定义层要求填全^[2]。

渲染模式的选择

纯静态生成适合内容与地址可枚举的站点。需要按请求拼页面时走服务端渲染，此时页面依赖运行时，首字节时间与缓存策略要重新考虑^[2][3]。

两者混用是它的常见用法：多数页面静态化，少数入口按需渲染。

要自己做的四件事

站点地图、RSS、规范网址与重定向表都要显式配置或由集成模块产出，框架不代做^[2]。图片要用它的资源处理管线，才能自动得到尺寸与格式变体^[5]。第三方脚本尽量放到组件里，别全站加载。构建产物要接部署与提交，发布后核对抓取状态^[6]。

常见误用

第一种是每个页面都引入完整框架运行时，静态默认优势被抵消^[1]。第二种是内容集合字段没有约束，前台模板只能容错处理，标题与摘要经常缺。第三种是把服务端渲染当默认，忽略部署环境的资源要求^[1]。

附录

参见

• 静态站点生成器
• Hugo
• Next.js
• 服务端渲染（SSR）
• 图片
• 页面体验

参考资料

官方（境外）

1. 《Astro 文档》，Astro 项目。
2. 《Astro：内容集合》，Astro 项目。
3. 《JavaScript SEO 基础知识》，Google 搜索中心。
4. 《了解 Core Web Vitals 和 Google 搜索结果》，Google 搜索中心。
5. 《Astro：图片与资产》，Astro 项目。
6. 《了解站点地图》，Google 搜索中心。

外部链接

• Astro 部署指南，Astro 项目。