`client:only`

client:only skips server rendering entirely. The browser sees nothing where the component would be — until the JS loads and the component mounts.

When To Use

A component that requires the DOM, window, or other browser APIs during render — and that crashes if you try to render it on the server.

<RichTextEditor client:only="react" />
<MapboxMap client:only="react" />
<CanvasGame client:only="svelte" />

Specify the Framework

For other client:* directives, Astro knows the framework from the file extension (.tsx is React, .svelte is Svelte, etc.). With client:only, there’s no server render to give hints, so you pass the framework name explicitly: client:only="react".

What the User Sees Before Hydration

A blank space where the component would be — no fallback HTML. If you want a placeholder, render one yourself nearby:

<div class="map-placeholder">
  <MapboxMap client:only="react" />
</div>

Or use Astro’s slot pattern in a wrapper component to show fallback content until hydration completes.

Use Sparingly

client:only ships JS but offers zero progressive enhancement. If you can make the component server-renderable, do — even just a static “loading” version helps perceived performance.

Up Next

Where these framework components come from — adding React, Vue, Svelte, etc. with one command.