client:load directive in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load the component only on the client after the page loads.

Astro

<MyComponent [1] />

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

Aclient:idle

Bclient:media

Cclient:load

Dclient:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:idle which loads when the browser is idle, not immediately after load.

Using client:visible which loads when the component is visible in viewport.

The client:load directive tells Astro to load the component only on the client side after the page has loaded.

2fill in blank

medium

Complete the code to import and use a component with client:load directive.

Astro

import MyComponent from './MyComponent.astro';

export default function Page() {
  return <MyComponent [1] />;
}

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

Aclient:load

Bclient:only

Cclient:idle

Dclient:media

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:only which loads only on client but immediately.

Using client:idle which waits for browser idle.

Using client:load on the component ensures it loads on the client after the page load.

3fill in blank

hard

Fix the error in the code to correctly use client:load directive on the component.

Astro

<MyComponent [1] />

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

Aclientload

Bclient-load

Cclient_load

Dclient:load

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing colon with dash or underscore.

Omitting the colon entirely.

The correct syntax uses a colon: client:load. Other forms are invalid.

4fill in blank

hard

Fill both blanks to create a component that loads on client after page load and passes a prop.

Astro

<MyComponent [1] title=[2] />

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

Aclient:load

B"Hello"

C"World"

Dclient:idle

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:idle instead of client:load.

Passing unquoted strings as props.

Use client:load to load after page load and pass the string "Hello" as the title prop.

5fill in blank

hard

Fill all three blanks to create an object that loads components with client:load and filters names with length > 3.

Astro

const components = Object.fromEntries(
  names.filter(name => name.length > 3)
    .map([1] => [
      [2],
      <MyComponent [3] title={name} />
    ])
);

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

Aname

Bclient:load

Dclient:idle

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:idle instead of client:load.

Using different variable names inconsistently.

The object keys use name, the loop variable is name, and the directive is client:load.