astro/client-only-framework

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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