⚛️ React Component Demo

This page demonstrates how to use React components in Astro with client-side hydration.

React Counter Component

This is a React component with client-side interactivity. JS is downloaded as a static resource and executed in the browser, see console log.

Count: 0

ℹ️ About React in Astro

Prerendered by default: React components are rendered to HTML at build time (w/o JS)
Client-side hydration: Use directives like client:load to add interactivity
Partial hydration: Only the components that need interactivity are hydrated
Framework agnostic: Mix React with other frameworks in the same project

🔄 Hydration Options

client:load - Hydrate immediately when page loads
client:idle - Hydrate when browser becomes idle
client:visible - Hydrate when component enters viewport
client:media - Hydrate when media query matches
client:only - Skip server-side rendering entirely

← Back to Home