VOL.01 / 2026
技术 · Astro / 前端 / 性能

Astro 孤岛架构:让内容快,也让首页炫

2026.06.03 · 更新 2026.06.04

个人站点常有两个互相打架的诉求:内容页要极致轻量、秒开;首页又想要炫的交互动画。Astro 的孤岛架构(Islands)正好两头都顾。

默认零 JS

Astro 默认把页面渲染成纯 HTML/CSS,不带运行时 JS。文章页因此非常快。

需要交互的地方才「点亮」

只有标成交互的组件(岛)才会加载 JS,并可控制时机:

<Counter client:visible />
<Fancy client:idle />

对照表

场景策略
博客正文纯静态,零 JS
首页动效局部岛 + CSS 合成
阅读量边缘函数异步拉取

这正是本站的取舍:门面可以炫,但内容永远快。