Astro + React Integration Demo

Reference implementation demonstrating React component integration in Astro using Islands architecture

1. client:load - Immediate Hydration

Component hydrates immediately on page load. Best for critical interactive elements.

<ExampleReactDemo client:load />

React Demo Component

This is a React component running in an Astro Island.

Counter: 0

2. client:idle - Idle Hydration

Component hydrates when the browser is idle (after initial page load completes). Best for non-critical UI elements.

<ExampleReactDemo client:idle />

React Demo Component

This is a React component running in an Astro Island.

Counter: 0

3. client:visible - Viewport Hydration

Component hydrates when it enters the viewport. Best for below-the-fold content.

<ExampleReactDemo client:visible />

React Demo Component

This is a React component running in an Astro Island.

Counter: 0

4. client:only - Client-Side Only

Component is not server-rendered and only runs in the browser. Use when component requires browser APIs.

<ExampleReactDemo client:only="react" />

5. No Directive - Static HTML

Component is rendered to static HTML without JavaScript hydration. No interactivity.

Note: The button below will not work because the component is not hydrated.
<ExampleReactDemo />

React Demo Component

This is a React component running in an Astro Island.

Counter: 0