0
0
Astroframework~5 mins

client:visible for viewport-based loading in Astro - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What does client:visible do in Astro?

client:visible tells Astro to load and run a component only when it becomes visible in the user's viewport. This helps save resources by delaying loading until needed.

Click to reveal answer
beginner
Why use client:visible instead of client:load?

client:visible waits until the component scrolls into view before loading, improving page speed and reducing unnecessary work. client:load loads immediately after page load.

Click to reveal answer
intermediate
How does client:visible improve user experience?

By loading components only when visible, it reduces initial page load time and bandwidth use. This makes pages feel faster and smoother, especially on slow connections.

Click to reveal answer
intermediate
What underlying browser API does client:visible rely on?

client:visible uses the Intersection Observer API to detect when an element enters the viewport.

Click to reveal answer
advanced
Can client:visible be combined with other client directives in Astro?

No, only one client:* directive (including client:visible) can be used per Astro component.

Click to reveal answer
What triggers a component with client:visible to load?
AWhen the component scrolls into the viewport
BImmediately after page load
CWhen the user clicks the component
DAfter a fixed time delay
Which API does client:visible use to detect visibility?
AWebSocket API
BFetch API
CLocal Storage API
DIntersection Observer API
What is a main benefit of using client:visible?
ARuns components on the server only
BAutomatically caches components offline
CImproves page load speed by delaying component loading
DPreloads all components before user interaction
Can client:visible be used for SEO-critical content?
AYes, it improves SEO by preloading content
BNo, because content loads only when visible client-side
CYes, it renders content server-side
DNo, it disables rendering completely
Which Astro directive loads a component immediately after page load?
Aclient:load
Bclient:visible
Cclient:idle
Dclient:media
Explain how client:visible works and why it is useful in Astro projects.
Think about when the component actually starts running in the browser.
You got /4 concepts.
    Describe a scenario where using client:visible would improve user experience.
    Imagine a long page with many parts that users might not scroll to immediately.
    You got /4 concepts.