astro/directive-on-framework-component

Why

An Astro component always renders to HTML on the server; it has no client runtime to hydrate. A client:load on <Header /> imported from Header.astro is not supported: it does not make the header interactive, and the author believes it is. The documented rule is that a client directive belongs on a UI framework component (React, Preact, Vue, Svelte, Solid) imported directly into the .astro file.

Fix

For small behaviour on an Astro component, add a <script> inside it (processed and bundled once per page), ideally defining a custom element. For stateful UI, write that part as a framework component and give it the directive where it is used.

Examples

---
import Header from '../components/Header.astro'
import MenuToggle from '../components/MenuToggle.tsx'
---
<!-- bad -->
<Header client:load />
<!-- good -->
<Header />
<MenuToggle client:idle />

Sources

• Astro docs, Template directives reference (client directives)
• Astro docs, Islands architecture

Read it in the terminal

npx github:dawidolko/frontend-skills explain astro/directive-on-framework-component