fix(server-renderer): render className as escaped string (#14469)

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

@@ -154,7 +154,7 @@ describe('ssr: renderClass', () => {
       ssrRenderAttrs({
         className: ['foo', 'bar'],
       }),
-    ).toBe(` class="foo bar"`)
+    ).toBe(` class="foo,bar"`)
   })
 })
 

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

@@ -42,10 +42,16 @@ export function ssrRenderAttrs(
     const value = props[key]
     // force as attribute
     if (key.startsWith('^')) key = key.slice(1)
-    if (key === 'class' || key === 'className') {
+    if (key === 'class') {
       ret += ` class="${ssrRenderClass(value)}"`
     } else if (key === 'style') {
       ret += ` style="${ssrRenderStyle(value)}"`
+    } else if (key === 'className') {
+      // className should not go through ssrRenderClass which normalizes non-string
+      // values into strings. it should coerce directly into strings
+      if (value != null) {
+        ret += ` class="${escapeHtml(String(value))}"`
+      }
     } else {
       ret += ssrRenderDynamicAttr(key, value, tag)
     }