Learning Astro - Interactivity & Hydration

#Introduction

Astro ships static HTML by default, but sometimes a site needs interactivity: toggle buttons, forms, carousels, or live charts. Episode 7 covers how to bring that interactivity without sacrificing speed — through partial hydration.

The core idea is simple: each interactive component is an "island" that gets its own JavaScript, shipped and activated only when needed. You decide when that happens through a hydration directive.

This episode dissects the client:load, client:idle, and client:visible directives and their friends, then how to keep the JavaScript bundle as small as possible.

#Partial Hydration with Client Directives

#client:load for Immediate Interactivity

The client:load directive tells Astro to load and hydrate the component as soon as the page loads. It fits elements that are immediately visible and important:

Hydration langsung saat halaman dimuat

---
import Navbar from "../components/Navbar.vue";
---
 
<header>
  <Navbar client:load />
</header>

The client:load on the Vue component above ships JavaScript right after the page finishes loading — ideal for navigation that must be responsive from the very first second.

#client:idle for Smart Delay

client:idle delays hydration until the browser is idle — after all important assets have loaded. A good choice for components that are not critical at the top of the page:

Hydration saat browser idle

---
import Rekomendasi from "../components/Rekomendasi.svelte";
---
 
<aside>
  <Rekomendasi client:idle />
</aside>

Components with client:idle do not block the main load process, so the page feels faster while the component still becomes interactive a moment later.

#client:visible for Content Below the Fold

client:visible only hydrates the component when its element is visible in the viewport. Components further down the page — like a gallery or a form in the footer — will not load JavaScript until the user scrolls near them:

Hydration saat terlihat di layar

---
import GaleriFoto from "../components/GaleriFoto.tsx";
---
 
<GaleriFoto client:visible />

This is very effective for long pages. Users who only read the top will not pay the JavaScript cost for the bottom.

#Other Hydration Directives

#client:media and client:only

For finer control, Astro provides client:media, which hydrates based on a media query — for example only on large screens — and client:only, which skips server-side rendering entirely, useful for components that need pure browser access:

Hydration hanya di layar desktop

<MenuSidebar client:media="(min-width: 1024px)" />

The client:media="(min-width: 1024px)" pattern keeps the sidebar menu static on small screens and only makes it interactive on desktop.

#Managing Only the Interactivity You Need

#The Fewer Islands, the Better Principle

Astro's golden rule: the fewer islands, the faster the site. Before adding a framework component, ask whether the element truly needs JavaScript. A simple toggle button can be written with the native HTML <details> element without a single byte of JavaScript.

#Using React, Vue, Svelte, or Solid Components

Each framework is hydrated independently. Make sure the integrations are installed first:

npx astro add react svelte

The command npx astro add react svelte installs both integrations at once. After that, pick one primary framework to keep the bundle small — mixing too many frameworks increases build size because every runtime gets shipped along.

#Bundle Optimization and JavaScript Performance

#Measuring the Impact of Hydration

Every directive you choose affects how much JavaScript is shipped. The most economical order is generally client:visible for below-the-fold content, client:idle for secondary elements, and client:load only for what is truly critical above the fold.

To inspect the result, open DevTools on the Network tab and filter by JS type. Compare the total bytes before and after adding directives — you will see a dramatic drop compared to loading an entire framework on every page.

#Combining with Static and Server Modes

Partial hydration works in all rendering modes. On static sites, islands hydrate on the client. On server sites, content is still rendered on the server and JavaScript is shipped only for interactive islands — the combination we started discussing in episode 6 and will refine in episode 21.

#Conclusion

Episode 7 teaches you to bring interactivity through partial hydration: the client:load, client:idle, client:visible, client:media, and client:only directives, using components from various frameworks as islands, and bundle management strategies that keep the site light.

The key takeaways:

• client:load hydrates immediately; client:idle waits for browser idle.
• client:visible only hydrates when the element is in the viewport.
• client:media and client:only give conditional control.
• The fewer islands, the faster the site.
• Choose one primary framework to keep the bundle small.
• Check the results via DevTools Network and Performance.

In the next episode 8, we will cover configuration and environment: astro.config.mjs and basic settings, environment variables with import.meta.env, plugin and adapter integration, and build optimization and output path. Correct configuration will prepare your project for production.