`client:load`

`client:load` hydrates the island as soon as the page loads. Use it for above-the-fold interactive components.

2 min read Level 1/5 #astro#client-load#hydration

What you'll learn

Use `client:load`
Recognize when it's the right choice

client:load hydrates the island immediately when the page loads. The browser downloads the component’s code and runs it right away, blocking nothing else important but happening as soon as possible.

When To Use

Above-the-fold widgets the user might interact with quickly
A theme toggle in the header
A primary search box

Example

---
import Counter from "../components/Counter.tsx";
---

<h1>Welcome</h1>
<Counter client:load initial={0} />

Costs

client:load ships JavaScript with the highest priority. If the component isn’t urgent, prefer client:idle or client:visible — they spread the cost out.

Up Next

client:idle — wait for the browser to be idle.

`client:idle` →