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.
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:loadhelps 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:loadwill 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