client:visible for viewport-based loading in Astro

Introduction

This feature helps load parts of a webpage only when they appear on the screen. It saves data and makes pages faster.

When you have images or videos that should load only when the user scrolls to them.

For loading interactive widgets only when they become visible to the user.

To improve page speed by delaying loading of heavy components until needed.

When you want to reduce initial data usage on slow connections.

For better user experience by showing content smoothly as the user scrolls.

Syntax

Astro

<Component client:visible />

Use to tell Astro to load this component only when it enters the viewport.

This works by watching if the component is visible on the screen and then loading its JavaScript.

Examples

This loads MyWidget only when it scrolls into view.

Astro

<MyWidget client:visible />

The image gallery will load its scripts only when visible, saving initial load time.

Astro

<ImageGallery client:visible />

The video player component loads when the user scrolls to it, not before.

Astro

<VideoPlayer client:visible />

Sample Program

This example shows a Counter component that only loads when you scroll down to it. The tall empty space forces scrolling.

Astro

---
import Counter from '../components/Counter.jsx';
---

<h1>Welcome to my page</h1>
<p>Scroll down to see the counter load.</p>

<div style="height: 100vh;"></div>

<Counter client:visible />

Important Notes

Using client:visible improves performance by delaying JavaScript loading.

Make sure the component works well when loaded late, without breaking page flow.

This feature uses the browser's Intersection Observer API behind the scenes.

Summary

client:visible loads components only when they appear on screen.

This saves data and speeds up page loading.

Use it for images, videos, or interactive parts that don't need to load immediately.