First island

Readers want to react. Give them a hype button.

So far zero JavaScript ships to your visitors. That's a feature. But sometimes you genuinely need interactivity — a button, a counter, a toggle.

This is the islands moment. Write the interactive bit in React , Vue , Svelte , Preact , or Solid — whatever you like. Drop it into an Astro page. Add client:load . Done.

The rest of the page stays static HTML. Only the island hydrates.

✦ src/components/Hype.tsx — a Preact component read-only

import { useState } from "preact/hooks";

export default function Hype({ initial }) {
  const [count, setCount] = useState(initial);

  return (
    <button onClick={() => setCount(count + 1)}>
      🚀 hype · {count}
    </button>
  );
}

Now use it on your log page — just like a regular .astro component, but with a client:load directive:

✦ src/pages/logs/launch-day.astro read-only

---
import Layout from "~/layouts/Layout.astro";
import Hype from "~/components/Hype.tsx";
---

<Layout title="Launch day">
  <article>
    <h1>Launch day</h1>
    <p>Ignition at T-0. Apollo 42 cleared the tower.</p>

    // this one bit becomes interactive ↓
    <Hype initial="{42}"  client:load />
  </article>
</Layout>

Click the button. The number goes up. Real JavaScript in the browser.

The page itself is still server-rendered HTML — the article text, the layout, the header. Only the hype button ships a JS bundle. That's the whole islands idea.

— page 5 —