client:visible for viewport-based loading in Astro - Step-by-Step Execution

Concept Flow - client:visible for viewport-based loading

Page loads

↓

Component marked client:visible

↓

Browser checks if component is in viewport

↓

Component renders and runs client code

This flow shows how Astro waits to load and run a component's client code only when it becomes visible in the browser viewport.

Execution Sample

Astro

<div>My Widget</div>

<script>
  console.log('Widget loaded')
</script>

This Astro component logs 'Widget loaded' only when it scrolls into view.

Execution Table

Step	Event	Viewport Check	Action	Output
1	Page loads	Component not visible	Do not load client code	No console log
2	User scrolls	Component enters viewport	Load and hydrate component	Console logs 'Widget loaded'
3	User scrolls away	Component exits viewport	Component remains loaded	No new logs
4	User scrolls back	Component re-enters viewport	No reload needed	No new logs

💡 Component client code loads only once when it first becomes visible in viewport.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
componentVisible	false	false	true	false	true
clientCodeLoaded	false	false	true	true	true

Key Moments - 2 Insights

Why doesn't the client code run immediately on page load?

Because the component is marked with client:visible, Astro waits until the component enters the viewport before loading and running its client code, as shown in execution_table step 1.

What happens if the user scrolls past the component and then back again?

The client code loads only once when the component first becomes visible. Scrolling away and back does not reload it, as shown in execution_table steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the client code load?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check the 'Action' column where it says 'Load and hydrate component'.

According to variable_tracker, what is the value of clientCodeLoaded after step 1?

A false

B true

C undefined

D null

💡 Hint

Look at the 'clientCodeLoaded' row under 'After Step 1' column.

If the component was visible on page load, how would the execution table change?

A Client code never loads

B Client code loads at step 3

C Client code loads at step 1

D Client code loads at step 4

💡 Hint

If visible immediately, loading happens right away, not waiting for scroll.

Concept Snapshot

Astro's client:visible loads client code only when component enters viewport.
Page loads without running client code if component is offscreen.
When user scrolls component into view, Astro hydrates it.
Client code runs once, no reload on scrolling away and back.
Great for performance by delaying work until needed.

Full Transcript

The client:visible directive in Astro delays loading and running client-side code for a component until it becomes visible in the browser viewport. When the page first loads, if the component is offscreen, Astro does not load its client code. Once the user scrolls and the component enters the viewport, Astro loads and hydrates the component, running its client code. This happens only once; scrolling away and back does not reload the code. This approach improves performance by loading code only when needed.