fix: serialize less vnode data

packages/qwik/src/core/client/vnode-diff.ts

@@ -1237,7 +1237,12 @@ function getComponentHash(vNode: VNode | null, getObject: (id: string) => any):
 function Projection() {}
 
 function propsDiffer(src: Record<string, any>, dst: Record<string, any>): boolean {
-  if (!src || !dst) {
+  const srcEmpty = isPropsEmpty(src);
+  const dstEmpty = isPropsEmpty(dst);
+  if (srcEmpty && dstEmpty) {
+    return false;
+  }
+  if (srcEmpty || dstEmpty) {
     return true;
   }
   let srcKeys = removePropsKeys(Object.keys(src), ['children', QBackRefs]);
@@ -1257,6 +1262,13 @@ function propsDiffer(src: Record<string, any>, dst: Record<string, any>): boolea
   return false;
 }
 
+function isPropsEmpty(props: Record<string, any>): boolean {
+  if (!props) {
+    return true;
+  }
+  return Object.keys(props).length === 0;
+}
+
 function removePropsKeys(keys: string[], propKeys: string[]): string[] {
   for (let i = propKeys.length - 1; i >= 0; i--) {
     const propKey = propKeys[i];

packages/qwik/src/core/shared/shared-serialization.ts

@@ -38,7 +38,7 @@ import type { DeserializeContainer, HostElement, ObjToProxyMap } from './types';
 import { _CONST_PROPS, _VAR_PROPS } from './utils/constants';
 import { isElement, isNode } from './utils/element';
 import { EMPTY_ARRAY, EMPTY_OBJ } from './utils/flyweight';
-import { ELEMENT_ID } from './utils/markers';
+import { ELEMENT_ID, QBackRefs } from './utils/markers';
 import { isPromise } from './utils/promises';
 import { SerializerSymbol, fastSkipSerialize } from './utils/serialize-utils';
 import {
@@ -843,12 +843,16 @@ function $discoverRoots$(
 const isSsrAttrs = (value: number | SsrAttrs): value is SsrAttrs =>
   Array.isArray(value) && value.length > 0;
 
-const discoverValuesForVNodeData = (vnodeData: VNodeData, callback: (value: unknown) => void) => {
+const discoverValuesForVNodeData = (
+  vnodeData: VNodeData,
+  callback: (value: unknown) => void,
+  filter: (key: string, value: unknown) => boolean = (_, attrValue) => typeof attrValue === 'string'
+) => {
   for (const value of vnodeData) {
     if (isSsrAttrs(value)) {
       for (let i = 1; i < value.length; i += 2) {
         const attrValue = value[i];
-        if (typeof attrValue === 'string') {
+        if (filter(value[i - 1] as string, attrValue)) {
           continue;
         }
         callback(attrValue);
@@ -1198,7 +1202,14 @@ async function serialize(serializationContext: SerializationContext): Promise<vo
       }
       if (value.childrenVNodeData) {
         for (const vNodeData of value.childrenVNodeData) {
-          discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => $addRoot$(vNodeDataValue));
+          discoverValuesForVNodeData(
+            vNodeData,
+            (vNodeDataValue) => {
+              $addRoot$(vNodeDataValue);
+            },
+            (key, value) => typeof value === 'string' && key !== QBackRefs
+          );
+
           vNodeData[0] |= VNodeDataFlag.SERIALIZE;
         }
       }

packages/qwik/src/core/tests/component.spec.tsx

@@ -301,6 +301,76 @@ describe.each([
     );
   });
 
+  it('should not rerender component with empty props', async () => {
+    (globalThis as any).componentExecuted = [];
+    const Component1 = component$<PropsOf<any>>(() => {
+      (globalThis as any).componentExecuted.push('Component1');
+      return <div></div>;
+    });
+    const Parent = component$(() => {
+      (globalThis as any).componentExecuted.push('Parent');
+      const show = useSignal(true);
+      return (
+        <main class="parent" onClick$={() => (show.value = !show.value)}>
+          {show.value && <Component1 />}
+          <Component1 />
+        </main>
+      );
+    });
+    const { vNode, container } = await render(<Parent />, { debug });
+    expect((globalThis as any).componentExecuted).toEqual(['Parent', 'Component1', 'Component1']);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          <Component ssr-required>
+            <div></div>
+          </Component>
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+    await trigger(container.element, 'main.parent', 'click');
+    expect((globalThis as any).componentExecuted).toEqual([
+      'Parent',
+      'Component1',
+      'Component1',
+      'Parent',
+    ]);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          {''}
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+    await trigger(container.element, 'main.parent', 'click');
+    expect((globalThis as any).componentExecuted).toEqual([
+      'Parent',
+      'Component1',
+      'Component1',
+      'Parent',
+      'Parent',
+      'Component1',
+    ]);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          <Component ssr-required>
+            <div></div>
+          </Component>
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+  });
+
   it('should remove children from component$', async () => {
     const log: string[] = [];
     const MyComp = component$((props: any) => {

packages/qwik/src/core/tests/render-namespace.spec.tsx

@@ -227,7 +227,7 @@ describe.each([
             <Component>
               <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="15" cy="15" r="50"></circle>
-                <Signal>
+                <Signal ssr-required>
                   <line x1="0" y1="80" x2="100" y2="20" stroke="black" key="1"></line>
                 </Signal>
               </svg>