Question
Client Directives: Transitioning from client:load to client:visible for performance
Sora Orbit
0 reputation · 26 Jun 2020, 07:10 UTC
117.7K views
Loading…
0 reputation · 26 Jun 2020, 07:10 UTC
Astro's Islands architecture allows developers to control hydration through client directives. While client:load ensures immediate interactivity, it increases the initial JavaScript payload, potentially impacting the Largest Contentful Paint (LCP) on pages with numerous interactive elements.
When migrating components to client:visible, the framework utilizes the Intersection Observer API to defer hydration until the element enters the viewport. However, this creates a design trade-off regarding the perceived latency between the element appearing and becoming interactive, especially for components located just below the fold.
Given the goal of minimizing the initial JS bundle without sacrificing user experience, what are the best practices for determining the threshold between these two directives? Are there documented methods to pre-fetch the hydration script before the component actually enters the viewport to eliminate the interaction lag?
34775 reputation · 26 Jun 2020, 11:49 UTC
Transitioning from client:load to client:visible is a balance between reducing initial JavaScript execution and ensuring immediate responsiveness. While client:visible significantly improves Largest Contentful Paint (LCP), it can introduce a 'hydration gap' where a component is visually present but non-interactive because the JavaScript hasn't executed yet.
To decide which directive to use, categorize your components based on their position in the viewport and their interaction priority:
astroclient:load for elements visible immediately on page load (e.g., navigation menus, hero sections). Deferring these creates a broken user experience.client:visible for elements likely to be scrolled to quickly (e.g., footers, sidebars).client:visible for heavy components at the bottom of long pages (e.g., comment sections, complex data tables).Astro does not currently offer a specific "client:prefetch" directive for hydration, but you can mitigate interaction lag by using the rootMargin option within the client:visible directive. This allows the Intersection Observer to trigger hydration before the element actually enters the viewport.
Example of using a margin to pre-empt hydration:
< Hydrates when the component is 200px away from entering the viewport ---
<MyComponent client:visible={{rootMargin: "200px"}} />By setting a positive value for rootMargin, you start the script download and execution while the user is still scrolling toward the element, increasing the likelihood that the component is interactive by the time it reaches their view.
This analysis assumes you are using a modern browser where the Intersection Observer API is natively supported. The effectiveness of rootMargin depends heavily on the user's scroll speed and network latency; on extremely slow 3G connections, even a 200px margin may not be sufficient to eliminate lag entirely.
Use comments to ask for clarification. Post a solution as an answer.
5,940 reputation · 26 Jun 2020, 15:04 UTC
Astro’s client:visible accepts a threshold parameter (e.g. client:visible:threshold=0.5). The default value is 0, which hydrates as soon as any pixel appears. Raising the threshold delays hydration until that percentage of the component is actually in view, giving you a knob to trade off perceived latency against LCP.
When a component is marked client:visible, Astro injects a <link rel="preload" as="script" href="…"> in the head. The hydration bundle is fetched immediately, so the script is ready when the IntersectionObserver finally fires.
For critical components you can add your own prefetch:
<link rel="preload" as="script" href="/components/Widget.js">
<Widget client:visible:threshold=0.3 />
Verify by inspecting the page source for the link rel="preload" tag and checking that the script request starts while the component remains off‑screen.