client:visible for viewport-based loading in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using client:visible in Astro?

Consider an Astro component with client:visible directive. What is the behavior of this component in the browser?

Astro

<MyComponent client:visible />

A The component loads and runs its client-side JavaScript only when it enters the viewport.

B The component loads and runs its client-side JavaScript immediately on page load.

C The component never loads its client-side JavaScript, only static HTML is rendered.

D The component loads client-side JavaScript after a fixed delay regardless of viewport.

💡 Hint

Think about when the browser detects the component is visible on screen.

The client:visible directive in Astro delays loading the client-side JavaScript until the component scrolls into the viewport. This improves performance by avoiding unnecessary script execution.

📝 Syntax

intermediate

Which is the correct syntax to use client:visible in Astro?

You want to load a component only when it becomes visible in the viewport. Which of the following is the correct way to write this in Astro?

A <MyComponent client:visible />

B <MyComponent client:visible={true} />

C <MyComponent client:visible='true' />

D <MyComponent clientVisible />

💡 Hint

Astro directives use colon syntax without values for boolean flags.

Astro uses directives like client:visible as boolean flags without assigning values. Adding =true or quotes is invalid syntax.

🔧 Debug

advanced

Why does client:visible not trigger loading when component is already visible on page load?

You added client:visible to a component that is visible immediately on page load, but its client-side JavaScript does not run. What is the most likely cause?

Astro

<MyComponent client:visible />

A The <code>client:visible</code> directive only works after scrolling, not on initial viewport.

B The component is inside a container with CSS <code>display: none</code> or <code>visibility: hidden</code> on load.

C Astro does not support <code>client:visible</code> for components above the fold.

D The component must have an explicit <code>id</code> attribute for <code>client:visible</code> to work.

💡 Hint

Check if CSS hides the component initially.

If the component or its parent container is hidden with CSS on page load, the browser does not detect it as visible, so client:visible does not trigger loading.

❓ state_output

advanced

What is the state of a client:visible component before it enters the viewport?

Before a component with client:visible loads its client-side JavaScript, what is rendered and what state does it have?

Astro

<MyComponent client:visible />

A The component is fully interactive but hidden with CSS until visible.

B The component runs client-side JavaScript but does not render anything until visible.

C Only the static HTML from the server is rendered; no client-side interactivity or state is active.

D The component is replaced with a loading spinner until it becomes visible.

💡 Hint

Think about what the browser receives before JavaScript loads.

With client:visible, Astro sends static HTML initially. The client-side code and interactivity only load when the component scrolls into view.

🧠 Conceptual

expert

Why choose client:visible over client:load in Astro?

Which of the following best explains the advantage of using client:visible instead of client:load for loading components?

A <code>client:visible</code> disables client-side JavaScript entirely, making the component static.

B <code>client:visible</code> loads the component immediately but delays rendering until visible, improving SEO.

C <code>client:visible</code> preloads the component's JavaScript before page load to avoid delays when scrolling.

D <code>client:visible</code> delays JavaScript loading until the component is actually seen, improving initial page load performance and reducing unused code execution.

💡 Hint

Consider when the JavaScript actually downloads and runs.

client:visible improves performance by loading JavaScript only when needed, unlike client:load which loads immediately on page load regardless of visibility.