What is client:load in Astro: Explanation and Usage

client:load in Astro is a directive that tells the framework to load and run a component only on the client side after the page has fully loaded. It delays JavaScript execution until the browser finishes loading, improving initial page speed and user experience.

How It Works

Imagine you have a web page that mostly shows static content, but some parts need interactive features like buttons or forms. Astro lets you write components that only run JavaScript when needed. The client:load directive tells Astro to wait until the whole page is loaded in the browser before running the JavaScript for that component.

This is like waiting for everyone to arrive at a party before starting a game. The page loads quickly without waiting for scripts, then the interactive parts start working once everything is ready. This helps keep the page fast and smooth for users.

Example

This example shows a simple Astro component that uses client:load to run a counter only after the page loads.

astro

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

<Counter client:load />

Output

A button labeled 'Count: 0' that increments the number each time it is clicked, visible only after the page fully loads.

When to Use

Use client:load when you want to add interactive features that don't need to run immediately during page load. It is great for widgets, counters, or any UI that can wait until the page is fully visible.

This helps improve page speed and reduces unnecessary JavaScript running too early. For example, if you have a comment form or a like button, client:load ensures these run only when the user can interact with them.

Key Points

• client:load delays JavaScript until after page load.
• Improves initial page speed by not running scripts too early.
• Best for interactive components that can wait to start.
• Works well with static content to keep pages fast.

Key Takeaways

client:load runs component JavaScript only after the full page loads in the browser.

It helps keep pages fast by delaying interactive scripts until needed.

Use it for UI elements that don't require immediate interaction on page load.

It balances static content speed with client-side interactivity.