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.

Practice

1. Which situation is best for keeping a component static in Astro?

easy

A. When the component only displays information and has no user interaction

B. When the component needs to update frequently based on user input

C. When the component requires real-time data fetching

D. When the component has buttons that trigger events

Solution

1. Step 1: Understand static components

   Static components do not need to respond to user actions or update dynamically.

2. Step 2: Identify when to keep static

   If a component only shows fixed information without interactivity, it should remain static for better performance.

3. Final Answer:

   When the component only displays information and has no user interaction -> Option A

4. Quick Check:

   Static = no interactivity [OK]

Hint: Static means no user interaction needed [OK]

Common Mistakes:

• Thinking all components must hydrate
• Hydrating components without user actions
• Confusing static with dynamic updates

2. Which Astro syntax correctly hydrates a component only on client load?

easy

A. <MyComponent />

B. <MyComponent client:idle />

C. <MyComponent client:visible />

D. <MyComponent client:load />

Solution

1. Step 1: Recall hydration directives

   Astro uses client:load to hydrate a component immediately after the page loads.

2. Step 2: Match syntax to behavior

   client:load hydrates on load, client:idle waits for idle, client:visible hydrates when visible, and no directive means no hydration.

3. Final Answer:

   <MyComponent client:load /> -> Option D

4. Quick Check:

   client:load = hydrate on load [OK]

Hint: client:load hydrates immediately after page load [OK]

Common Mistakes:

• Using client:idle when immediate hydration is needed
• Omitting hydration directive expecting auto hydration
• Confusing client:visible with client:load

3. Given this Astro component usage:

<Counter client:idle />

What happens when the page loads?

medium

A. The Counter component hydrates immediately and is interactive

B. The Counter component never hydrates and stays static

C. The Counter component hydrates only when the browser is idle

D. The Counter component hydrates only when visible on screen

Solution

1. Step 1: Understand client:idle behavior

   The client:idle directive delays hydration until the browser is idle, improving performance.

2. Step 2: Predict component behavior on load

   On page load, the component is static until the browser has free time, then it hydrates and becomes interactive.

3. Final Answer:

   The Counter component hydrates only when the browser is idle -> Option C

4. Quick Check:

   client:idle = hydrate on idle [OK]

Hint: client:idle waits for browser idle before hydrating [OK]

Common Mistakes:

• Assuming immediate hydration with client:idle
• Thinking client:idle means no hydration
• Confusing client:idle with client:visible

4. You wrote this Astro code:

<Button client:load>Click</Button>

But the button is not interactive. What is the likely problem?

medium

A. You forgot to import the Button component

B. You used client:load on a static HTML element

C. You did not export the Button component properly

D. You need to add client:visible instead of client:load

Solution

1. Step 1: Check hydration on static elements

   Hydration directives like client:load only work on Astro components, not plain HTML elements.

2. Step 2: Identify the problem in code

   Using client:load on a native HTML tag like <Button> (instead of a component) does nothing, so no interactivity.

3. Final Answer:

   You used client:load on a static HTML element -> Option B

4. Quick Check:

   Hydrate only Astro components, not plain HTML [OK]

Hint: Hydrate only Astro components, not HTML tags [OK]

Common Mistakes:

• Assuming hydration works on native HTML tags
• Not importing components correctly
• Confusing client:load with client:visible

5. You have a dashboard with a live chat and a static news feed. How should you hydrate these in Astro for best performance?

hard

A. Keep news feed static and hydrate chat with client:visible

B. Hydrate news feed with client:idle and chat static

C. Hydrate both chat and news feed immediately with client:load

D. Keep both static and add hydration later if needed

Solution

1. Step 1: Analyze component interactivity needs

   The live chat requires interactivity, so it needs hydration. The news feed is static content and does not need hydration.

2. Step 2: Choose hydration strategy for performance

   Hydrating chat with client:visible delays hydration until visible, improving load speed. Keeping news feed static avoids unnecessary hydration.

3. Final Answer:

   Keep news feed static and hydrate chat with client:visible -> Option A

4. Quick Check:

   Hydrate interactive only, keep static content static [OK]

Hint: Hydrate interactive parts only, keep static parts static [OK]

Common Mistakes:

• Hydrating static content unnecessarily
• Delaying hydration of interactive parts too long
• Hydrating everything immediately hurting performance