Choose a client directive

A framework component is static HTML until you give it a client directive. The directive decides when its JavaScript downloads and hydrates:

<SearchBox client:load />
<NewsletterForm client:idle />
<Comments client:visible />
<MobileMenu client:media="(max-width: 48rem)" />

Choose by user impact:

• client:load is for interaction needed immediately
• client:idle waits until the initial page work is less urgent
• client:visible waits until an off-screen component approaches the viewport
• client:media waits until a media query matches
• client:only="react" skips server rendering and runs only in the browser

client:only removes the useful initial HTML, so reserve it for components that truly cannot render on the server because they depend on browser APIs. It may show nothing until JavaScript runs.

Hydration makes the existing HTML interactive; it is not the same as rendering the component for the first time. Start with no directive, confirm the static output is useful, then add the least urgent directive that still meets the interaction requirement.

Test the result with throttled JavaScript and with JavaScript disabled. A low-priority widget may appear late, but essential content and navigation should not disappear with it.