Hydrate When the Browser Is Idle
`client:idle`
`client:idle` waits for the browser's `requestIdleCallback` before hydrating. Good for components that aren't urgent.
What you'll learn
- Use `client:idle`
- Know when to prefer it over `client:load`
client:idle hydrates the island when the browser is idle —
using requestIdleCallback (or a fallback timeout). Same code
ships, but lower priority than client:load.
When To Use
- A widget the user MIGHT interact with, but not right away
- A comments counter, share buttons, anything below the fold but on this page
- Anything you’d like to lazy-load without sacrificing responsiveness once needed
Example
<SocialShare client:idle url={post.url} />What “Idle” Means
requestIdleCallback runs the callback when the main thread has
nothing better to do — after layout, paint, and any pending
microtasks. Page interaction stays smooth even on slow devices.
For browsers without requestIdleCallback, Astro falls back to a
short setTimeout.
Up Next
client:visible — only hydrate when scrolled into view.