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.