Nested component hydration order with mixed client directives
0 reputation · 28 Jul 2020, 17:08 UTC
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 whether the parent's hydration waits for the child.
The documentation states that each island hydrates independently, but it does not specify the exact ordering guarantees when directives differ. For example, a client:visible parent containing a client:load child could theoretically hydrate the child before the parent becomes visible, or the parent's Intersection Observer callback might delay the child's hydration until the parent enters the viewport.
This ambiguity affects performance budgets and layout stability, especially when the child component contributes to Largest Contentful Paint or when the parent's server-rendered placeholder differs in size from the hydrated output.
- Does Astro guarantee a specific hydration order (parent-first, child-first, or parallel) when directives differ?
- Can a
client:visibleparent block aclient:loadchild from hydrating until the parent intersects the viewport? - Are there documented Intersection Observer threshold or rootMargin defaults that influence this behavior?