When to hydrate vs keep static in Astro - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you use client:load in Astro?

In Astro, if you add client:load to a component, what is the expected behavior of that component on the client side?

Astro

<MyComponent client:load />

A The component is rendered statically on the server and then hydrated immediately after the page loads on the client.

B The component is never hydrated and remains static HTML only.

C The component is hydrated only when it enters the viewport (lazy hydration).

D The component is hydrated only when the user clicks on it.

💡 Hint

Think about when hydration happens with client:load compared to other hydration directives.

client:load tells Astro to hydrate the component immediately after the page loads on the client. This means the component is first rendered as static HTML on the server, then JavaScript runs to make it interactive right after loading.

❓ component_behavior

intermediate

Choosing hydration strategy for a static info card

You have a simple info card component in Astro that only displays static text and images. Which hydration directive should you use to optimize performance?

Astro

<InfoCard client:??? />

A No hydration directive to keep it static

B client:idle to hydrate when the browser is idle

C client:visible to hydrate only when the component scrolls into view

D client:load to hydrate immediately after page load

💡 Hint

If the component does not need interactivity, what is the best choice?

If the component is purely static and does not require any interactivity, it is best to keep it static without hydration. This reduces JavaScript load and improves performance.

❓ state_output

advanced

What is the hydration behavior of client:visible in Astro?

Consider this Astro component usage:
<InteractiveWidget client:visible />
What happens when the page loads and the widget is initially off-screen?

Astro

<InteractiveWidget client:visible />

A The component is hydrated immediately after page load regardless of visibility.

B The component is hydrated only when it scrolls into the viewport.

C The component hydrates only after a user clicks anywhere on the page.

D The component never hydrates and stays static.

💡 Hint

Think about lazy hydration triggered by visibility.

client:visible delays hydration until the component is visible in the viewport. This saves resources by not hydrating components off-screen.

🔧 Debug

advanced

Why does this Astro component stay static despite client:load?

You wrote:
<MyButton client:load />
But the button does not become interactive after page load. What is the most likely cause?

Astro

<MyButton client:load />

A The <code>client:load</code> directive only works for server components, not client components.

B Astro does not support hydration directives on components inside layouts.

C The component's JavaScript is missing or not bundled correctly, so hydration fails.

D The component is hydrated but the browser cache prevents updates.

💡 Hint

Check if the component's JavaScript is properly included in the build.

If the component's JavaScript is missing or not bundled, hydration cannot happen even if client:load is used. This results in a static, non-interactive component.

🧠 Conceptual

expert

When should you prefer static rendering over hydration in Astro?

Which scenario best justifies keeping a component static without hydration in Astro?

A A form that validates user input before submission.

B A live chat widget that updates messages in real-time.

C A navigation menu that requires dropdown interactivity on hover and click.

D A footer with only copyright text and links that never change.

💡 Hint

Think about when interactivity is not needed at all.

Static rendering is best for content that never changes and does not require user interaction, like a simple footer. Hydrating such components wastes resources.

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