When to hydrate vs keep static in Astro

Introduction

Hydrating adds interactivity to parts of your webpage. Keeping static means the content stays simple and fast without extra scripts.

Use hydration when you want buttons or forms to respond to clicks or input.

Keep content static when it is just text or images that don't need user interaction.

Hydrate only small parts of the page to improve speed and reduce loading time.

Keep static for content that rarely changes and does not need user actions.

Hydrate when you want to update the page dynamically without reloading.

Syntax

Astro

Astro component with hydration directive:

---
import MyComponent from './MyComponent.jsx';
---
<MyComponent client:load />

Static Astro content:

---
---
<h1>Hello, world!</h1>

The client:load directive tells Astro to hydrate the component when the page loads.

Static content in Astro does not include any hydration directives and stays simple HTML.

Examples

This example hydrates the button so it can respond to clicks after the page loads.

Astro

---
import InteractiveButton from './InteractiveButton.jsx';
---
<InteractiveButton client:load />

This content stays static and loads fast without extra JavaScript.

Astro

---
---
<p>This is static text that does not change or respond to user actions.</p>

This hydrates the form only when the browser is idle, improving performance.

Astro

---
import Form from './Form.jsx';
---
<Form client:idle />

This hydrates the widget only when it scrolls into view, saving resources.

Astro

---
import Widget from './Widget.jsx';
---
<Widget client:visible />

Sample Program

This Astro page shows a static title and a counter component that becomes interactive after loading.

Astro

---
import Counter from './Counter.jsx';
---
<h1>Static Title</h1>
<Counter client:load />

Important Notes

Hydrating too many components can slow down your page load time.

Use static content whenever possible for faster and simpler pages.

Astro offers different hydration strategies like client:load, client:idle, and client:visible to optimize performance.

Summary

Hydrate components only when you need interactivity.

Keep content static if it does not require user actions.

Choose hydration strategies wisely to balance speed and functionality.