先把内容交给浏览器

博客页面的大部分内容都不需要交互：标题、正文、日期以及导航链接，用 HTML 就能完整表达。Astro 默认在服务端或构建阶段渲染组件，把结果交给浏览器。

这意味着，引入一个 Vue 组件并不等于自动把它的运行时代码发送给用户。没有客户端指令时，它可以只输出静态 HTML。

一个页面，几座小岛

搜索框需要响应输入，主题按钮需要处理点击，文章正文则只负责阅读。把这些交互区域单独激活，就是岛屿架构的一个直观用法。

---
import Search from "../components/header/Search.vue";
import PersonalCard from "../components/home/PersonalCard.vue";
---

<Search posts={posts} client:load />
<PersonalCard posts={posts} />

这里，搜索组件会在浏览器中进行水合，个人卡片只渲染静态内容。

选择合适的加载时机

• client:load：页面加载时激活，适合导航和搜索等核心交互。
• client:idle：等待浏览器空闲，适合优先级较低的小组件。
• client:visible：组件进入视口时激活，适合首屏以外的交互。

不要为了使用某个指令而使用它。如果组件没有交互，就让它保持静态。

数据边界也值得设计

传给客户端组件的数据会进入页面输出。文章列表只需要标题、摘要、标签和链接，就不必把整篇正文传进去。

为页面定义一份明确的摘要类型，可以同时减少传输量和组件耦合。内容库负责数据来源，界面负责显示，交互组件只拿到自己需要的部分。

轻盈不是功能少

静态内容与局部交互可以很好地共存。让每一段 JavaScript 都有明确的职责，往往比一味追求框架技巧更能改善体验。