全书目录

第三十五篇：Astro 完全指南 —— 内容展馆群岛宇宙

第六章：`client:*` 指令，就是给互动展台安排通电时机

1 分钟 295 字 第 658 / 962 个阅读单元

Astro 里最重要的一组指令，是 client:*。

它们决定一座互动展台何时开始在浏览器里真正运行。

astro
---
import SearchBox from '../components/SearchBox.jsx';
import GalleryCarousel from '../components/GalleryCarousel.svelte';
import SeatPicker from '../components/SeatPicker.vue';
import MobileGuide from '../components/MobileGuide.tsx';
---

<SearchBox client:load />
<GalleryCarousel client:visible />
<SeatPicker client:idle />
<MobileGuide client:media="(max-width: 768px)" />

把它们翻成展馆语言：

  • client:load
    • 一开馆就通电
    • 适合首屏立刻要互动的展台
  • client:idle
    • 先让游客看展，等浏览器空闲再通电
    • 适合优先级不高的互动块
  • client:visible
    • 游客走到这块区域附近，才通电
    • 适合长页面下方的大组件
  • client:media
    • 只有满足某个媒体条件时才通电
    • 适合移动端专属控件
  • client:only="react"
    • 这块展台完全只在浏览器端搭
    • 连服务端 HTML 都不先给

这一组指令背后的思想非常值得反复记：

text
Astro 不是问“要不要 hydration”
而是问“这块互动到底该在什么时候 hydration”

这比二元思维更高级。