-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
Closed
Closed
Copy link
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr
Description
Vue version
3.5.10
Link to minimal reproduction
Steps to reproduce
- Open SFC Playground
- Make sure that
SSR
is turned ON - Notice that there is an hydration mismatch error (reload page if it's not shown immedeately)
What 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 children useId
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
and v-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 client
Thus, the order of the ids is different between server and client, which leads to hydration mismatch.
System Info
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
Memory: 16.92 GB / 31.78 GB
Binaries:
Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.7.1 - C:\Program Files\nodejs\pnpm.CMD
bun: 1.1.23 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (127.0.2651.86)
Internet Explorer: 11.0.19041.3636
npmPackages:
vue: latest => 3.5.10
Any additional comments?
No response
Metadata
Metadata
Assignees
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr