dev-create-island

To create an interactive island, you generate a framework-specific component and apply a hydration directive like client:load, client:idle, or client:visible to control when it executes on the client. This ensures optimal performance by only hydrating components when needed.

Astro hydration strategies for React, Vue, and Svelte islands include client:load for immediate hydration, client:idle for hydration when the browser is idle, and client:visible for hydrating when the component enters the viewport. You can also use media queries for conditional hydration.

Yes, the island generation pattern supports typed props specifically designed for safe serialization. This ensures that data passed from the server to the client-side interactive island maintains its type integrity, preventing runtime errors during hydration.

Use client:visible for framework islands when the component is below the fold and not immediately visible, as it defers hydration until scrolling. Use client:idle for components needed soon but not immediately, allowing the browser to handle higher priority tasks first to optimize page load.

Building hydration-ready islands requires selecting an appropriate hydration strategy like client:load or client:visible. This guided pattern automates the framework-specific file creation and hydration directive application, ensuring the interactive island is properly configured for client-side execution.

The best way to wire up an interactive island is to create a framework-specific component in React, Vue, or Svelte, define typed props, and import it into an Astro page with a hydration directive. This pattern enables reusable, controlled hydration.