fix(ssr): ensure empty slots render as comment nodes in hydration

Author: edison1105

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1681,7 +1681,7 @@ describe('SSR hydration', () => {
   test('transition appear work with empty content', async () => {
     const show = ref(true)
     const { vnode, container } = mountWithHydration(
-      `<template></template>`,
+      `<template><!----></template>`,
       function (this: any) {
         return h(
           Transition,
@@ -1696,7 +1696,7 @@ describe('SSR hydration', () => {
       },
     )
 
-    // expect empty slot render as a comment node
+    // empty slot render as a comment node
     expect(container.firstChild!.nodeType).toBe(Node.COMMENT_NODE)
     expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()

packages/runtime-core/src/hydration.ts

@@ -202,9 +202,7 @@ export function createHydrationFunctions(
           // wrapped <transition appear>
           // replace <template> node with inner child
           replaceNode(
-            // #13394, the server may render an empty <template>, a comment node
-            // needs to be created to be consistent with the client's behavior
-            (vnode.el = node.content.firstChild || createComment('')),
+            (vnode.el = node.content.firstChild!),
             node,
             parentComponent,
           )
@@ -399,11 +397,10 @@ export function createHydrationFunctions(
           parentComponent.vnode.props &&
           parentComponent.vnode.props.appear
 
-        let content =
-          (el.content.firstChild as Element & { $cls?: string }) ||
-          createComment('')
+        const content = (el as HTMLTemplateElement).content
+          .firstChild as Element & { $cls?: string }
 
-        if (needCallTransitionHooks && content instanceof Element) {
+        if (needCallTransitionHooks) {
           const cls = content.getAttribute('class')
           if (cls) content.$cls = cls
           transition!.beforeEnter(content)

packages/server-renderer/__tests__/ssrSlot.spec.ts

@@ -124,6 +124,14 @@ describe('ssr: slot', () => {
       ),
     ).toBe(`<!---->`)
 
+    expect(
+      await renderToString(
+        createApp({
+          template: `<transition><slot/></transition>`,
+        }),
+      ),
+    ).toBe(`<!---->`)
+
     expect(
       await renderToString(
         createApp({

packages/server-renderer/src/helpers/ssrRenderSlot.ts

@@ -117,6 +117,8 @@ export function ssrRenderSlotInner(
     }
   } else if (fallbackRenderFn) {
     fallbackRenderFn()
+  } else if (transition) {
+    push(`<!---->`)
   }
 }