用 Astro 搭建静态网站的一点体会
#Astro#前端#性能
传统前端框架有个矛盾：为了交互，整页都要下发并执行 JavaScript，即使 90% 的内容其实是静态的。Astro 用 Islands 架构 解决了这个问题。
一切默认静态
在 Astro 里，页面默认编译成纯 HTML，浏览器不下载任何框架运行时。只有你显式标记为「岛屿」的组件才会加载对应的 JS。
---
import Counter from '../components/Counter.tsx';
---
<!-- 静态内容,零 JS -->
<h1>标题</h1>
<!-- 交互岛屿:仅这块加载 React -->
<Counter client:visible />client 指令
client:* 指令决定岛屿何时激活：
| 指令 | 时机 |
|---|---|
client:load |
页面加载后立即激活 |
client:visible |
滚动到可见时才激活 |
client:idle |
浏览器空闲时激活 |
对于「首屏之下」的交互模块，用 client:visible 能进一步节省首屏开销。
结论
如果你的站点以内容展示为主、只有少量交互，Astro 几乎是理想选择：写起来像普通网页，性能却接近手写的静态页。