Hydration directives
Five identical components, five different directives. Each says whether it has hydrated and when. Reload the page and watch the order they light up in; the timestamps are real.
Immediately
client:loadnot hydrated yet
Hydrates as soon as the page script runs. Use it for components that are broken until interactive — a search box, a login form.
client:idlenot hydrated yet
Waits for the browser to be idle. Same result, later, for anything that is nice to have rather than needed at once.
Conditionally
This one is deliberately below the fold. It is still grey. Scroll to it and it hydrates — that is the whole behaviour, and it is why below-the-fold components should almost always use it.
client:visiblenot hydrated yet
Hydrates when the component scrolls into view. Nothing is fetched or executed for it before that.
client:medianot hydrated yet
Hydrates only when the media query matches. Narrow your window below 60rem and reload — it stays grey, and its code is never fetched.
Never on the server
Note what this costs: a client:only component contributes nothing to the HTML, so there is a blank space until it renders, and search engines see nothing there. Prefer any of the other four when the component can be server-rendered.