Why client:visible for viewport-based loading in Astro? - Purpose & Use Cases

The Big Idea

What if your website could magically load only what your visitor actually sees, making it lightning fast?

The Scenario

Imagine you have a long webpage with many images and components. You try to load them all at once when the page opens.

This makes the page slow to start and uses a lot of data, even for parts the user never scrolls to.

The Problem

Loading everything upfront wastes time and bandwidth.

It can cause the page to freeze or feel sluggish.

Users might leave before the page finishes loading.

The Solution

The client:visible feature loads components only when they appear in the user's viewport (the visible part of the page).

This means less data is loaded at first, making the page faster and smoother.

Before vs After

✗ Before

import Component from './Component.astro';
<Component />
<Component />
<Component />

✓ After

import Component from './Component.astro';
<Component client:visible />
<Component client:visible />
<Component client:visible />

What It Enables

You can build fast, efficient websites that load content just in time as users scroll.

Real Life Example

Think of social media feeds that load new posts only when you scroll down, saving data and speeding up your experience.

Key Takeaways

Loading all content at once slows pages and wastes data.

client:visible loads components only when visible on screen.

This improves speed and user experience by loading just what's needed.