Merge pull request #8094 from QwikDev/v2-fix-use-id-ssr

fix: useId should genereate different id for ssr

Author: wmertens

.changeset/shy-carpets-switch.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: useId should genereate different id for ssr

packages/qwik/src/core/tests/use-id.spec.tsx

@@ -1,6 +1,6 @@
-import { component$, componentQrl, inlinedQrl, useId } from '@qwik.dev/core';
+import { component$, componentQrl, inlinedQrl, useId, useSignal } from '@qwik.dev/core';
 import { describe, expect, it } from 'vitest';
-import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing';
+import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -34,11 +34,47 @@ describe.each([
 
     const { document } = await render(<Parent />, { debug });
     if (render === ssrRenderToDom) {
-      expect(document.querySelector('#cmp1')?.textContent).toMatch(/^\w{3}cmp0$/);
-      expect(document.querySelector('#cmp2')?.textContent).toMatch(/^\w{3}2cm1$/);
+      expect(document.querySelector('#cmp1')?.textContent).toMatch(/^\w{3}cmp255s$/);
+      expect(document.querySelector('#cmp2')?.textContent).toMatch(/^\w{3}2cm255t$/);
     } else {
       expect(document.querySelector('#cmp1')?.textContent).toMatch(/^cmp0$/);
       expect(document.querySelector('#cmp2')?.textContent).toMatch(/^Ccm1$/);
     }
   });
+
+  it('should generate different ids for csr and ssr', async () => {
+    const Checkbox = component$((props: { label: string }) => {
+      const id = useId();
+      return (
+        <div>
+          <input type="checkbox" id={id} />
+          <label for={id}>{props.label}</label>
+        </div>
+      );
+    });
+
+    const Cmp = component$(() => {
+      const enabled = useSignal(false);
+
+      return (
+        <div>
+          <h1>useId Example</h1>
+          <Checkbox label="Item 1" />
+          <button
+            onClick$={() => {
+              enabled.value = !enabled.value;
+            }}
+          ></button>
+
+          {enabled.value && <Checkbox label="Subitem 1" />}
+        </div>
+      );
+    });
+
+    const { document } = await render(<Cmp />, { debug });
+    await trigger(document.body, 'button', 'click');
+    const inputs = document.querySelectorAll('input');
+    expect(inputs.length).toBe(2);
+    expect(inputs[0].id).not.toBe(inputs[1].id);
+  });
 });

packages/qwik/src/server/ssr-container.ts

@@ -249,6 +249,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     this.$buildBase$ = opts.buildBase;
     this.resolvedManifest = opts.resolvedManifest;
     this.renderOptions = opts.renderOptions;
+    // start from 100_000 to avoid interfering with potential existing ids
+    this.$currentUniqueId$ = 100_000;
 
     const qlOpt = this.renderOptions.qwikLoader;
     this.qlInclude = qlOpt