astro/client-only-framework

Why

client:only skips server rendering, so Astro never runs the component at build time and cannot find out which framework renderer it needs. Without the value the island cannot be hydrated correctly, and with no fallback the space stays empty until the script runs, which shifts the layout.

Fix

Name the framework: client:only="react" (or preact, vue, svelte, solid-js). Put placeholder content with slot="fallback" inside the component so the page reserves the space. Prefer client:load, client:idle or client:visible when the component can render on the server.

Examples

<!-- bad -->
<Map client:only />
<!-- good -->
<Map client:only="react"><p slot="fallback">Loading the map…</p></Map>

Sources

• Astro docs, Template directives reference (client:only)

Read it in the terminal

npx github:dawidolko/frontend-skills explain astro/client-only-framework