Astro

现代静态站点框架

被 9 篇文章引用前端框架472 字2026-10-12全部知识点

Astro 是什么#

Astro 是一个内容优先的静态站点生成器。它的核心卖点是「默认零 JS」—— 页面在构建期就渲染成静态 HTML，只有你显式标记的交互组件才会被水合。

关键概念#

岛架构（Islands）#

页面上大部分是静态 HTML，只有少数「交互岛」需要 JS。这个站就是 —— 顶栏、评论区、个人中心是 Svelte 岛，其余全是静态 HTML。

三种水合指令#

指令何时水合
client:load页面加载后立刻
client:visible滚动到可见时
client:only跳过 SSR，纯客户端

⚠️ client:only 的 props 在构建期就固化了 —— 运行时才有的值（如 URL 参数）传进去会失效，要组件自己读。

Content Layer#

Astro 5 引入的自定义 loader 机制 —— 可以把数据源从本地 Markdown 换成数据库，页面代码一行不用改。

什么时候不该用#

  • 需要大量实时交互的应用（那是 SPA 的领域）
  • 内容量极大且更新极频繁的站（SSG 每次都要重建）

引用了这个词条的文章