3 files changed, 24 insertions, 5 deletions
diff --git a/packages/integrations/react/server-v17.js b/packages/integrations/react/server-v17.js
index ab5b06350..551b350d5 100644
--- a/packages/integrations/react/server-v17.js
+++ b/packages/integrations/react/server-v17.js
@@ -65,7 +65,11 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
 	};
 	const newChildren = children ?? props.children;
 	if (newChildren != null) {
-		newProps.children = React.createElement(StaticHtml, { value: newChildren });
+		newProps.children = React.createElement(StaticHtml, {
+			// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+			hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
+			value: newChildren
+		});
 	}
 	const vnode = React.createElement(Component, newProps);
 	let html;
@@ -80,4 +84,5 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
 export default {
 	check,
 	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
 };
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index 3f7e786ac..e84b8bf27 100644
--- a/packages/integrations/react/server.js
+++ b/packages/integrations/react/server.js
@@ -58,6 +58,11 @@ async function getNodeWritable() {
 	return Writable;
 }
 
+function needsHydration(metadata) {
+	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+}
+
 async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
 	let prefix;
 	if (this && this.result) {
@@ -69,7 +74,11 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 	const slots = {};
 	for (const [key, value] of Object.entries(slotted)) {
 		const name = slotName(key);
-		slots[name] = React.createElement(StaticHtml, { value, name });
+		slots[name] = React.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value,
+			name
+		});
 	}
 	// Note: create newProps to avoid mutating `props` before they are serialized
 	const newProps = {
@@ -78,7 +87,10 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 	};
 	const newChildren = children ?? props.children;
 	if (newChildren != null) {
-		newProps.children = React.createElement(StaticHtml, { value: newChildren });
+		newProps.children = React.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value: newChildren
+		});
 	}
 	const vnode = React.createElement(Component, newProps);
 	const renderOptions = {
@@ -182,4 +194,5 @@ async function renderToReadableStreamAsync(vnode, options) {
 export default {
 	check,
 	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
 };
diff --git a/packages/integrations/react/static-html.js b/packages/integrations/react/static-html.js
index 9589aaed8..37fda1983 100644
--- a/packages/integrations/react/static-html.js
+++ b/packages/integrations/react/static-html.js
@@ -7,9 +7,10 @@ import { createElement as h } from 'react';
  * As a bonus, we can signal to React that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name }) => {
+const StaticHtml = ({ value, name, hydrate }) => {
 	if (!value) return null;
-	return h('astro-slot', {
+	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
+	return h(tagName, {
 		name,
 		suppressHydrationWarning: true,
 		dangerouslySetInnerHTML: { __html: value },