注疏 · 前端

Astro islands

别名 群岛架构 / islands

Astro 的核心架构——页面默认是零 JS 的静态 HTML,只有需要交互的组件(岛)才单独注水,其余保持纯静态。

简述

Astro islands 是一种前端架构:整个页面默认渲染成纯静态 HTML,一行 JS 都不带;只有真正需要交互的组件——一个岛——才单独加载 JS 注水。页面其余部分永远是静态的。

详解

传统 SPA(Vue/React 单页应用)把整页做成一个大 JS 应用,首屏要下几百 KB 才能显示。islands 反过来:文章正文、导航这些不需要交互的,直接是 HTML,秒开、SEO 完整;只有 朱批 面板、校勘记 面板、悬停卡这几个需要交互的挂成岛,用 client:load 之类的指令声明何时注水。

深化

mindplace 选 Astro 就冲着这个。服务器是 3M 小带宽,一个零 JS 的文章页只有几十 KB,比 SPA 首包小一个数量级。而知识库天然读多写少、正文为主,绝大部分内容根本不需要交互——islands 让”静态为主、交互点缀”成为默认,而非例外。踩过一个坑:client:visible 和 client:idle 依赖浏览器的 IntersectionObserver / requestIdleCallback,某些环境里会迟迟不注水,最后把关键的岛都改成 client:load,确定性优先。