diff --git a/.changeset/quiet-pugs-tie.md b/.changeset/quiet-pugs-tie.md new file mode 100644 index 000000000000..5bad03e911ee --- /dev/null +++ b/.changeset/quiet-pugs-tie.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix hydration for SSR components that return null diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts index 4f743263110b..d3a22a5c2d09 100644 --- a/packages/astro/src/runtime/server/astro-island.ts +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -42,7 +42,7 @@ declare const Astro: { public hydrator: any; static observedAttributes = ['props']; connectedCallback() { - if (this.getAttribute('client') === 'only' || this.firstChild) { + if (!this.getAttribute('await-children') || this.firstChild) { this.childrenConnectedCallback(); } else { // connectedCallback may run *before* children are rendered (ex. HTML streaming) diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index 230c043edb3e..8188e716520b 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -452,6 +452,10 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr island.children = `${html ?? ''}${template}`; + if (island.children) { + island.props['await-children'] = '' + } + // Scripts to prepend let prescriptType: PrescriptType = needsHydrationScript ? 'both'