Skip to content
Astro Javascript

Template Directives "client:load"

In Astro, client:load is a directive used to control when a client-side component should be hydrated and run its JavaScript on the client. Setting client:load on a component instructs Astro to load and hydrate the component immediately after the initial HTML is loaded. This is useful when you need interactivity on a component right away.

08 Mar, 2025 3 min min de lecture
Template Directives "client:load"

When to Use client:load

  • Immediate Interactivity Needed: If a component contains interactive elements (e.g., a navigation menu, search box, or modal) that users need to interact with as soon as the page loads, use client:load. This ensures the component's JavaScript runs as soon as it’s ready, enabling instant interaction.

  • Dynamic Data Handling on Client: For components that rely on dynamic data or have to fetch and display updated data after the initial load, client:load helps by making the JavaScript available right away. For example, if you’re displaying user-specific data from an API that needs to load immediately, client:load will make the request right after the page loads.

  • Animations and Effects: Components that initiate animations or other effects as soon as the page loads benefit from client:load. This ensures that animations trigger as soon as they’re in the viewport, without waiting for user interactions like clicks.

Example Use Case

 

 
<BuyButton client:load />
 

 

Partager:
Retour aux articles