ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
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
Astro 4.x utilizes an Islands Architecture where client directives control the hydration timing of components. While client:load ensures immediate interactivity, it increases the initial JavaScript execution overhead, potentially impacting Core Web Vitals. Moving to client:visible leverages the Intersection Observer API to defer hydration until the component
Astro's Islands Architecture allows for granular control over hydration using client:* directives. When implementing complex UI patterns, it is possible to nest components that each carry their own hydration strategy, such as a client:visible component wrapped within a client:load parent. There is uncertainty regarding the execution order and dependency reso
Hydration sequencing for parent and child islands Astro's Islands Architecture allows each component to declare its own hydration strategy via client:load , client:visible , client:idle , or client:only . When a parent island uses one directive and a nested child island uses a different directive, the framework must decide which component hydrates first and
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 utilize
astro