fix: prevent async render tag hydration mismatches (#17652)

If the render tag is wrapped in `$.async`, that `$.async` call already contains surrounding markers, so we must not add our own to avoid hydration mismatches. Related to #17641, fixes #17225

.changeset/two-places-speak.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent async render tag hydration mismatches

packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js

@@ -37,7 +37,9 @@ export function RenderTag(node, context) {
 
 	context.state.template.push(...optimiser.render_block([statement]));
 
-	if (!context.state.is_standalone) {
+	// If the render tag is wrapped in $.async, that $.async call already contains surrounding markers,
+	// so we don't need to (or rather must not, to avoid hydration mismatches) add our own.
+	if (!optimiser.is_async() && !context.state.is_standalone) {
 		context.state.template.push(empty_comment);
 	}
 }

packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js

@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `Count: 1 Double: 2`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	let count = $state(1);
+	async function getDouble(count: number) {
+		return count * 2;
+	}
+	const double = $derived(await getDouble(count));
+</script>
+
+Count: {count}
+
+{#snippet ssr(num: number)}
+	{num}
+{/snippet}
+
+Double: {@render ssr(double)}