createUniqueId returns duplicate IDs when used with <NoHydration> and <Suspense>

[fongandrew]

Describe the bug

When rendering in SSR with <NoHydration>, a <Suspense> wrapper will reset the context or counter used by createUniqueId. This can result in duplicate IDs.

Granted, there is no actual use case for Suspense without hydration. But when working with isomorphic JS, it is possible to introduce a component like Suspense into pure SSR code via shared components. For example, you might have a generic "Card" component that wraps everything in Suspense with a default spinner as a matter of course. So long as no async resource is accessed within any of the Suspense children on SSR, I would expect things to keep working as if Suspense wasn't there at all.

Your Example Website or App

https://stackblitz.com/edit/solid-ssr-vite-kfrwzikw?file=src%2Fentry-server.tsx

Steps to Reproduce the Bug or Issue

Rendering something on the server like this will result in duplicate IDs.

function Child() {
  const id = createUniqueId();
  return <div id={id} />;
}

function Parent() {
  return (
      <NoHydration>
        <Child />
        <Child />
        <Suspense fallback={null}>
          <Child />
          <Child />
        </Suspense>
      </NoHydration>
  );
}

renderToString(() => <Parent />);

Expected behavior

As a developer, I'd expect either:

• For Suspense to effectively be a noop with hydration off and not reset the createUniqueId context
• Or since Suspense doesn't really do anything without hydration, for there to be some sort of warning or error.

Screenshots or Videos

StackBlitz screenshot showing how IDs are unique with hydration on but not with hydration off:

Platform

• Node 18.20.3

Additional context

No response

[ryansolid]

Yeah it is similar issue as here: #2131

In general it wasn't trivial to solve without breaking things currenty in SolidStart. Will keep this in mind for future designs.