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