client:visible for viewport-based loading in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load the component only when it becomes visible in the viewport.

Astro

<MyComponent [1] />

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

Aclient:media

Bclient:visible

Cclient:idle

Dclient:load

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load loads immediately, not on visibility.

client:idle waits for idle time, not visibility.

client:media loads based on media queries, not viewport visibility.

The client:visible directive tells Astro to load the component only when it enters the viewport.

2fill in blank

medium

Complete the code to import and use a component with viewport-based loading.

Astro

---
import MyComponent from './MyComponent.astro';
---

<div>
  <[1] [2] />
</div>

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

Aclient:load

Bclient:visible

CMyComponent

DMyComponentVisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using the directive name as the component tag.

Using an undefined component name.

Use the imported component name MyComponent and the client:visible directive for viewport-based loading.

3fill in blank

hard

Fix the error in the component usage to enable viewport-based loading.

Astro

<MyComponent [1] />

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

Aclient:only

Bclient:load

Cclient:idle

Dclient:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using client:load loads immediately, not on visibility.

client:idle waits for idle time, not visibility.

client:only is not a valid directive.

The correct directive for viewport-based loading is client:visible.

4fill in blank

hard

Fill both blanks to create a component that loads only when visible and passes a prop.

Astro

<[1] [2] someProp="value" />

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

AMyComponent

Bclient:visible

Cclient:load

DOtherComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the component name and directive.

Using client:load instead of client:visible.

The component name goes first, then the client:visible directive to enable viewport-based loading.

5fill in blank

hard

Fill all three blanks to import a component, use viewport-based loading, and pass a prop.

Astro

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

<[3] client:visible message="Hello" />

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

AMyComponent

DOtherComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching import name and filename.

Using a different component name in the tag.

You import the component by name and filename, then use it with client:visible and pass props.