eclipsesource / eclipsesource/jsonforms

Server Side Rendering causes different id's to be generated on client/server

Open
#2,519 1 comment 0 reactions 0 assignees View on GitHub
core
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.