React Islands Demo

❌ Without Client Directive (Static)

This Counter has NO client directive. It renders to HTML but the buttons don't work:

React Counter

0

⚠️ Notice: The counter appears but clicking does nothing! Astro rendered it to HTML at build time, but shipped NO JavaScript.

✅ With client:load (Interactive Island)

This Counter has client:load. It's fully interactive:

React Counter

0

✨ This one works! Astro shipped React + your component code to make it interactive.

✅ With client:visible (Lazy Island)

This Counter has client:visible. It only loads when you scroll to it:

React Counter

0

🚀 This one loads JavaScript only when it enters the viewport. Great for performance!

What's Happening?

Open your browser's DevTools → Network tab → Refresh the page. You'll see React JavaScript files ONLY for the counters with directives!