When to hydrate vs keep static in Astro - Visual Side-by-Side Comparison

Concept Flow - When to hydrate vs keep static

Start: Astro component rendered

↓

Decide: Does component need interactivity?

↓

Hydrate component

↓

Browser runs JS

↓

User interacts

↓

Update UI

↓

End

The flow shows deciding if a component needs interactivity to choose hydration or static rendering.

Execution Sample

Astro

<MyButton client:load />
<MyHeader />

Hydrates MyButton for interactivity; MyHeader stays static without JS.

Execution Table

Step	Component	Hydration Decision	Action Taken	Result
1	MyButton	Needs interactivity	Hydrate with client:load	JS loads, button interactive
2	MyHeader	No interactivity needed	Keep static	No JS, static header rendered
3	User clicks MyButton	Event triggers	JS handles click	UI updates dynamically
4	User views MyHeader	No JS	Static content shown	Faster load, no CPU used
5	End	-	-	Hydration only for interactive components

💡 All components processed; hydration applied only where needed

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
MyButton hydrated	false	true	true	true	true
MyHeader hydrated	false	false	false	false	false
JS loaded	false	true	true	true	true
UI interactive	false	true	true	true	true

Key Moments - 3 Insights

Why does MyHeader not load JavaScript?

Because MyHeader is kept static (see execution_table step 2), it does not need JS for interactivity.

What triggers hydration for MyButton?

The client:load directive tells Astro to hydrate MyButton on page load (execution_table step 1).

Does hydration happen for all components automatically?

No, only components marked with hydration directives like client:load are hydrated (see execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the hydration decision for MyHeader at step 2?

A Keep static

B Hydrate with client:load

C Hydrate with client:idle

D Hydrate with client:visible

💡 Hint

Check the 'Hydration Decision' column at step 2 in the execution_table.

At which step does the user interaction with MyButton trigger a UI update?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'User clicks MyButton' and 'UI updates dynamically' in the execution_table.

If MyButton did not have client:load, what would change in the variable tracker after step 1?

A MyButton hydrated would be false

B MyButton hydrated would be true

C JS loaded would be true

D UI interactive would be true

💡 Hint

Refer to the 'MyButton hydrated' row in variable_tracker after step 1.

Concept Snapshot

Astro components can be static or hydrated.
Use hydration directives (client:load, client:idle, etc.) to add interactivity.
Static components load faster with no JS.
Hydrated components run JS for user interaction.
Choose hydration only when needed to optimize performance.

Full Transcript

This visual execution shows how Astro decides whether to hydrate a component or keep it static. First, the Astro component renders. Then it checks if the component needs interactivity. If yes, it hydrates the component using directives like client:load, loading JavaScript so the user can interact with it. If no, it keeps the component static with no JavaScript, improving load speed and reducing CPU use. For example, MyButton is hydrated and interactive, while MyHeader remains static. User clicks on MyButton trigger JavaScript events and UI updates. This approach helps balance performance and interactivity by hydrating only necessary components.