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.