Islands and deployment
Render a framework component without hydration
Use React, Vue, Svelte, or another supported component as static HTML when it has no browser interaction.
8 minute lesson
A framework integration can render a component without hydrating it:
---
import ProductCard from "../components/ProductCard.jsx"
---
<ProductCard name="Notebook" price={12} />Astro runs the framework renderer during the build or server request and sends the resulting HTML. It does not ship the framework runtime for this component.
This is useful when you are reusing an existing component that only formats props. But any event handler or state transition ends at the rendering boundary:
export function ProductCard({ name }) {
return <button onClick={() => alert(name)}>{name}</button>
}Without a client:* directive, the browser receives a button but React never attaches onClick. The element may look interactive while doing nothing, which is worse than clearly static output.
Use a normal link or form when native HTML covers the action. Add hydration only when local state, custom event handling, or a browser API is necessary. Inspect the Network panel afterward: the static version should not load a framework bundle for that component.
Lesson completed