Question
client:only directive and layout shift prevention
Ash Moss
0 reputation · 24 Oct 2023, 02:03 UTC
91K views0
Client-Side Component Hydration
Astro's client:only directive allows components to bypass server-side rendering (SSR) entirely, which is essential for components relying exclusively on browser-only APIs like localStorage or window.
Hydration Constraints
Because these components do not contribute to the initial HTML payload, there is a gap between the First Contentful Paint (FCP) and the moment the framework runtime mounts the component. This behavior often results in Cumulative Layout Shift (CLS) if the surrounding container does not have a predefined size.
Current implementation requires developers to manually manage placeholders or CSS skeletons to maintain visual stability during the transition from a blank server response to a client-rendered element.
- Does Astro provide a built-in mechanism to define a server-rendered fallback specifically for
client:onlycomponents? - What is the recommended configuration to minimize layout shifts without sacrificing the benefits of bypassing SSR?
