eclipsesource / eclipsesource/jsonforms
Server Side Rendering causes different id's to be generated on client/server
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 424
- Avg merge
- 17d 8h
- Merged PRs (30d)
- 1
Description
### Describe the bug
I'm using JsonForms with React in an SSR framework (TanStack Start) and experiencing hydration mismatches due to the ID generation.
I've created a minimal reproduction for TanStack specifically here:
https://github.com/SchutteJan/ssr-jsonforms
Here is the full hydration mismatch error message
```
react-dom_client.js?v=6dcb9bfa:4073 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
...
...
...
```
For this repro it seems that there is a difference in id's being generated:
```diff
+ htmlFor="#/properties/name2-input"
- htmlFor="#/properties/name4-input"
```
There seems to be an increment that increases on request, and is somehow different for server or client.
See https://github.com/SchutteJan/ssr-jsonforms/blob/main/src/routes/index.tsx for how I use JSONForms.
- Is there a recommended way to use SSR with jsonforms?
- Would you consider using React's useId() hook (React 18+) for deterministic IDs?
I couldn't find any documentation about server-side rendering, I apologize if this has been asked many times already.
### Expected behavior
No hydration issues
### Steps to reproduce the issue
1. clone repro repo
2. (p)npm install
3. (p)pnm run dev
4. navigate to http://localhost:3000/
5. open console for error
### Screenshots
_No response_
### Which Version of JSON Forms are you using?
v3.7.0
### Package
React Material Renderers, React Bindings
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.