Astro

默认零 JS 的内容框架：组件先服务端渲染，需要交互的地方才按需水合，Lighthouse 分数不需要优化技巧

项目速览

项目 内容
仓库 withastro/astro
语言 TypeScript
协议 MIT
形态 内容驱动框架（SSG / SSR / 混合）
特色 Island 架构、任意 UI 框架共存

它想解决什么问题

博客、文档站、营销页这类以内容为主的站点，用 SPA 框架做等于给每篇文章套一层运行时——首屏要等 JS 下载、解析、执行，SEO 与性能都要额外补课。

Astro 的立场很干脆：内容站点就该输出 HTML，JS 只在真正需要交互的组件上下发。

核心机制拆解

1. Island 架构。 页面静态生成，交互组件独立成”岛”按需水合，可选 client:load、client:visible、client:idle，粒度到组件。

2. 框架无关。 React、Vue、Svelte、Solid 可以同时出现在一个项目里，也可以什么都不用——.astro 模板自带组件能力。

3. 内容集合。 内置 Content Collections，Markdown/MDX 带类型校验，front-matter 写错会在构建期报错。

4. 输出灵活。 静态、服务端渲染、混合模式按路由配置，且能适配多种部署平台。

安装与上手

1
2
3
npm create astro@latest
cd my-site && npm run dev
npm run build

先跑一遍官方博客模板，再把自己的文章目录迁进 src/content/。

点评

亮点是”性能来自架构而不是技巧”：默认零 JS 意味着你不需要为了 lighthouse 满分去做一堆手动优化，少发字节是设计决定。多框架共存也降低了迁移成本——旧组件不用重写。

局限：高度交互的应用（仪表盘、编辑器）不适合它，别硬用；Island 边界设计不当会出现”该交互的地方不响应”；生态规模不如 Next/Nuxt，遇到复杂集成要自己写适配；SSR 模式下仍需部署运行时，静态托管才是它最舒服的场景。

适合人群：做博客、文档、官网的前端；需要兼顾性能与 SEO 的内容团队；以及想用任意 UI 框架写组件的开发者。