onServerPrefetch
causing unstable ids from useId
, leading to hydration mismatches
#12102
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
scope: ssr
Vue version
3.5.10
Link to minimal reproduction
https://play.vuejs.org/#__SSR__eNp9klFLwzAUhf/KNU8buE5RX3QKKgr6oKKCLwEZ7d2W2SYhN90Gpf/dm3Td5ph9a845ab7knkrcWpssShSXYkSpU9YDoS/tjdSqsMZ5eDQGJs4UIEUy5EVIS7Gxv5SfvTmcoE9n29yu2m4YDZsD+Ne88FjYfOyRVwCjo8EA/EwRLN3YWnRQIBESlBZURmBcxprRzOYW/AWDQbNv95yosBaAh439h6ORWnc03CEQx8JTavRETZM5Gc2vUYW0FKkprMrRvVqvjCYpLiE6wRvnuVk+R827Eo9bPZ1h+nNAn9MqaFIwUbyIFBvPj90UfWM/fLzgir83ZmGyMud0h/mOZPIyMDaxu1JnjL2Ti7RPcWhKTz/pYeVRU3upABqSdcxLwTO777j6FvcsOY/7pK75Fdf9+L9NFZSETxnUbVfW5eDHJ8+zhusm0OtfdTcmU4v1wFXGYJXKamYIM2+c/fnuN7ID0eiPWLM2vs8q9X6i1+vD9Q1Udb8bmnLjD7bvm38WZsFUZ8lFcnoi6l+a+TcK
Steps to reproduce
SSR
is turned ONWhat is expected?
No hydration mismatch caused by unstable ids
What is actually happening?
When the
onServerPrefetch
hook is used in a component, all of its childrenuseId
hooks seems to be delayed while rendering on server.For example, imagine you have 2 sibling components.
These components using
useId()
composable to generate id.They will get ids
v-0
andv-1
in the order of render both on client and server. Everything is fine.Lets wrap first component with a wrapper that uses
onServerPrefetch
hook.Now components will following ids:
v-1
,v-0
on the serverv-0
,v-1
on the clientThus, the order of the ids is different between server and client, which leads to hydration mismatch.
System Info
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: