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
Additional context
No response
Describe the bug
When rendering in SSR with
<NoHydration>, a<Suspense>wrapper will reset the context or counter used bycreateUniqueId. This can result in duplicate IDs.Granted, there is no actual use case for
Suspensewithout hydration. But when working with isomorphic JS, it is possible to introduce a component likeSuspenseinto pure SSR code via shared components. For example, you might have a generic "Card" component that wraps everything inSuspensewith a default spinner as a matter of course. So long as no async resource is accessed within any of theSuspensechildren on SSR, I would expect things to keep working as ifSuspensewasn'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.
Expected behavior
As a developer, I'd expect either:
Suspenseto effectively be a noop with hydration off and not reset thecreateUniqueIdcontextSuspensedoesn'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
Additional context
No response