0
0
Astroframework~5 mins

client:load directive in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

The client:load directive tells Astro to load and run a component only after the page has fully loaded in the browser. This helps keep the initial page fast and interactive.

When you want a component to appear only after the whole page is ready.
For interactive widgets that don't need to run during server rendering.
To improve page speed by delaying JavaScript until after load.
When you want to avoid blocking the initial page render with scripts.
Syntax
Astro
<ComponentName client:load />

Use it as an attribute on your Astro or framework component.

This directive delays loading the component's JavaScript until after the browser finishes loading the page.

Examples
This loads MyWidget only after the page load event.
Astro
<MyWidget client:load />
The Counter component will hydrate and run after the page is fully loaded.
Astro
<Counter client:load />
Sample Program

This Astro page imports a Counter component and uses client:load to load it only after the page finishes loading. The heading appears immediately, and the counter becomes interactive after load.

Astro
---
import Counter from '../components/Counter.jsx';
---
<html lang="en">
  <head>
    <title>Client Load Example</title>
  </head>
  <body>
    <h1>Welcome to Astro</h1>
    <Counter client:load />
  </body>
</html>
OutputSuccess
Important Notes

The client:load directive is great for non-critical interactive parts.

It waits for the full page load event, so it may delay interactivity slightly.

Use it to balance speed and interactivity in your Astro projects.

Summary

client:load delays component loading until after the page fully loads.

It helps keep initial page load fast and adds interactivity later.

Use it for widgets or components that don't need to run immediately.