Step
6/10
When to hydrate
Below the fold? Don't load it yet.
client:load is the easy default — but it eagerly downloads and hydrates every island the moment the page lands.
If your comments section is 300px down the page and 30 KB of JS, you don't need it for the first paint . Astro has finer-grained hints.
✦ src/pages/logs/launch-day.astro — pick your moment
read-only
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// loads immediately on page load
// use for: above-the-fold widgets
<Hype client:load />
// loads when the browser is idle
// use for: nice-to-haves, animations
<Newsletter client:idle />
// loads when it scrolls into view
// use for: anything below the fold
<Comments client:visible />
// loads only on mobile (or any media query)
<MobileNav client:media="(max-width: 700px)" />
// renders on the client ONLY — never on the server
// use for: things that need window, localStorage
<Map client:only="preact" /> Default to client:visible . It's the most polite — your bundle only loads if the user actually scrolls there.
client:only is the escape hatch — for libraries that crash on the server because they read window or document .
— page 6 —