client:idle for deferred hydration in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to defer hydration until the browser is idle.

Astro

<MyComponent client:[1] />

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

Avisible

Bidle

Cload

Dmedia

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load hydrates immediately, not deferred.

Using client:visible hydrates on visibility, not idle.

The client:idle directive tells Astro to hydrate the component when the browser is idle, improving performance.

2fill in blank

medium

Complete the code to import a component and hydrate it only when the browser is idle.

Astro

import MyComponent from './MyComponent.astro';

export default () => (
  <MyComponent client:[1] />
);

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

Aidle

Bmedia

Cload

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing client:load hydrates immediately, not deferred.

Choosing client:visible hydrates on visibility, not idle.

Using client:idle hydrates the component when the browser is idle, delaying work to improve user experience.

3fill in blank

hard

Fix the error in the hydration directive to defer until idle.

Astro

<MyComponent client:[1] />

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

Avisible

Bonly

Cidle

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load hydrates immediately.

Using client:visible hydrates on visibility.

The correct directive to defer hydration until the browser is idle is client:idle.

4fill in blank

hard

Fill both blanks to create a component that imports and hydrates only when the browser is idle.

Astro

import [1] from './[2].astro';

export default () => <[1] client:idle />;

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

AMyComponent

BYourComponent

COtherComponent

DIdleComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage.

Using a component name that doesn't match the file.

Both blanks should be MyComponent to correctly import and use the component with client:idle.

5fill in blank

hard

Fill all three blanks to create a deferred hydration component with a custom prop.

Astro

import [1] from './[2].astro';

export default () => (
  <[1] client:[3] message="Hello!" />
);

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

AGreeting

Cidle

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for component and file.

Using client:load instead of client:idle.

The component name and file name are both Greeting, and hydration is deferred with client:idle.

Practice

1. What does the client:idle directive do in Astro components?

easy

A. It hydrates the component immediately on page load.

B. It delays hydration until the browser is idle, improving page speed.

C. It prevents the component from ever hydrating.

D. It hydrates the component only when the user clicks it.

Solution

1. Step 1: Understand hydration timing

   client:idle waits for the browser to be idle before hydrating a component.

2. Step 2: Compare options

   Options B, C, and D describe immediate hydration, no hydration, or hydration on click, which are not what client:idle does.

3. Final Answer:

   It delays hydration until the browser is idle, improving page speed. -> Option B

4. Quick Check:

   client:idle delays hydration = A [OK]

Hint: Remember: idle means wait until browser is free [OK]

Common Mistakes:

• Confusing client:idle with client:load
• Thinking it hydrates immediately
• Assuming it waits for user interaction

2. Which is the correct syntax to use client:idle in an Astro component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Astro hydration syntax

   Astro uses directives like client:idle with a colon, not dashes or underscores.

2. Step 2: Check each option

   Only uses the correct colon syntax. Others use invalid attribute names.

3. Final Answer:

   <MyWidget client:idle /> -> Option A

4. Quick Check:

   Correct syntax uses colon = C [OK]

Hint: Use colon, not dash or underscore for client directives [OK]

Common Mistakes:

• Replacing colon with dash or underscore
• Using camelCase instead of colon syntax
• Omitting the directive entirely

3. Given this Astro component usage:

<Counter client:idle />

What happens when the page loads?

medium

A. The Counter component hydrates only after the browser is idle, delaying interactivity.

B. The Counter component hydrates immediately and is interactive right away.

C. The Counter component never hydrates and stays static.

D. The Counter component hydrates only when the user scrolls to it.

Solution

1. Step 1: Understand client:idle behavior

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

2. Step 2: Analyze options

   The Counter component hydrates only after the browser is idle, delaying interactivity. correctly describes delayed hydration after idle. Options A, C, and D are incorrect because hydration is delayed, not immediate, never, or on scroll. The Counter component hydrates only when the user scrolls to it. describes lazy hydration on scroll, which is client:visible, not idle.

3. Final Answer:

   The Counter component hydrates only after the browser is idle, delaying interactivity. -> Option A

4. Quick Check:

   client:idle delays hydration until idle = B [OK]

Hint: Idle means wait for free browser time before hydrating [OK]

Common Mistakes:

• Confusing client:idle with client:load or client:visible
• Thinking hydration is immediate
• Assuming hydration waits for user action

4. You wrote this Astro code:

<Widget client:idle>Click me</Widget>

But the component never hydrates. What is the likely problem?

medium

A. You must add client:load instead of client:idle for hydration.

B. client:idle only works on self-closing tags, not with children.

C. The browser never becomes idle, so hydration is delayed indefinitely.

D. You forgot to import the Widget component.

Solution

1. Step 1: Check component import

   If the component is not imported, Astro cannot hydrate it regardless of directives.

2. Step 2: Evaluate other options

   client:idle works with children and self-closing tags. The browser usually becomes idle eventually. client:load hydrates immediately but is not required here.

3. Final Answer:

   You forgot to import the Widget component. -> Option D

4. Quick Check:

   Missing import causes no hydration = D [OK]

Hint: Always import components before using hydration directives [OK]

Common Mistakes:

• Assuming client:idle needs self-closing tags
• Thinking browser never becomes idle
• Confusing client:idle with client:load

5. You want to improve your page speed by deferring hydration of a chat widget until the browser is idle. Which approach correctly applies client:idle and ensures accessibility?

hard

A. Use <ChatWidget client:load aria-hidden='true' /> to hydrate immediately but hide from screen readers.

B. Use <ChatWidget client:idle /> without aria-label because hydration delays interaction anyway.

C. Use <ChatWidget client:idle aria-label='Chat widget' /> so it hydrates when idle and has an accessible label.

D. Use <ChatWidget client:idle tabindex='-1' /> to defer hydration and remove keyboard focus.

Solution

1. Step 1: Apply client:idle correctly

   Using client:idle defers hydration until idle, improving page speed.

2. Step 2: Ensure accessibility

   Adding aria-label provides a descriptive label for screen readers, maintaining accessibility.

3. Step 3: Evaluate other options

   Use <ChatWidget client:idle /> without aria-label because hydration delays interaction anyway. lacks accessibility label. Use <ChatWidget client:load aria-hidden='true' /> to hydrate immediately but hide from screen readers. hydrates immediately and hides from screen readers, reducing accessibility. Use <ChatWidget client:idle tabindex='-1' /> to defer hydration and remove keyboard focus. removes keyboard focus, harming accessibility.

4. Final Answer:

   Use <ChatWidget client:idle aria-label='Chat widget' /> so it hydrates when idle and has an accessible label. -> Option C

5. Quick Check:

   Defer hydration + accessibility = A [OK]

Hint: Add aria-label with client:idle for accessible deferred hydration [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Using client:load instead of client:idle
• Removing keyboard focus unnecessarily