Interactivity in Astro

Interactivity is the fifth chapter of the free Astro tutorial. Asha's static pages get small interactive parts and smooth page changes, while staying fast.

What each lesson covers:

  • Astro Islands: the islands architecture, adding Preact with npx astro add, the five client:* directives, props and children, and sharing state between islands.
  • Page Navigation: <ClientRouter />, transition:name, transition:animate, transition:persist, the astro:page-load event, navigate() and prefetching.

Astro sends plain HTML by default, with no JavaScript. An island is one interactive component, such as a like button or a search box, that loads its own JavaScript while the rest of the page stays static. The first lesson shows how to add a UI framework, then choose when each island wakes up: right away, when the browser is idle, when it scrolls into view, at a screen size, or only in the browser. The second lesson makes moving between pages feel smooth with view transitions, keeps elements alive across pages, runs scripts after each navigation, and prefetches pages before a click.

Every lab runs Astro 7's real runtime with Preact islands in your browser. The Terminal shows when each island wakes up and when pages are swapped instead of reloaded.

Lessons in this section

  1. Astro Islands

    The islands architecture, adding a UI framework with npx astro add, framework components without a directive, client:load, client:idle, client:visible, client:media and client:only, props and children, sharing state between islands with a store, and when to use a script instead.

    • Explain the islands architecture
    • Add a UI framework integration
    • Choose the right client directive
    • Pass props and share state between islands
  2. Page Navigation

    Full page loads vs client-side navigation, the ClientRouter component, transition:name and transition:animate, transition:persist for islands, scripts and the astro:page-load event, navigate(), data-astro-reload and prefetching strategies. Checkpoint 3.

    • Turn on smooth navigation with ClientRouter
    • Animate and persist elements between pages
    • Run page setup code with astro:page-load
    • Prefetch pages and navigate from code