When to hydrate vs keep static in Astro - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a static Astro component.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:idle

Bclient:static

Cclient:visible

Dclient:load

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load hydrates the component unnecessarily.

client:idle delays hydration but still hydrates.

client:visible hydrates on visibility, not static.

Use client:static to keep the component static without hydration.

2fill in blank

medium

Complete the code to hydrate a component only when it becomes visible.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:static

Bclient:load

Cclient:idle

Dclient:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load hydrates immediately, not on visibility.

client:idle hydrates when browser is idle, not on visibility.

client:static does not hydrate at all.

client:visible hydrates the component when it scrolls into view.

3fill in blank

hard

Fix the error in the hydration directive to hydrate on page load.

Astro

<MyComponent [1] />

Drag options to blanks, or click blank then click option'

Aclient:load

Bclient:visible

Cclient:idle

Dclient:static

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:idle delays hydration until browser is idle.

client:visible waits for visibility, not page load.

client:static disables hydration.

client:load hydrates the component as soon as the page loads.

4fill in blank

hard

Fill both blanks to hydrate a component only when the browser is idle and keep it static otherwise.

Astro

<MyComponent [1] />
<AnotherComponent [2] />

Drag options to blanks, or click blank then click option'

Aclient:idle

Bclient:load

Cclient:static

Dclient:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load hydrates immediately, not on idle.

client:visible hydrates on visibility, not idle.

Mixing up static and hydration directives.

client:idle hydrates when the browser is idle, and client:static keeps the component static without hydration.

5fill in blank

hard

Fill all three blanks to hydrate a component on load, another on visibility, and keep a third static.

Astro

<CompLoad [1] />
<CompVisible [2] />
<CompStatic [3] />

Drag options to blanks, or click blank then click option'

Aclient:idle

Bclient:load

Cclient:static

Dclient:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing client:idle with client:load or client:visible.

Using client:static when hydration is needed.

Mixing hydration directives between components.

client:load hydrates on page load, client:visible hydrates on visibility, and client:static keeps the component static.