Description
Provide environment information
bunx envinfo --system --binaries --browsers --npmPackages "typescript,next,react,@trpc/server,@trpc/client,@trpc/react,@trpc/react-query,@trpc/client,@trpc/next,@tanstack/react-query"
System:
OS: Windows 11 10.0.26100
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 11.88 GB / 31.92 GB
Binaries:
Node: 20.7.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.14.3 - ~\AppData\Local\pnpm\pnpm.EXE
bun: 1.2.10 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (134.0.3124.93)
Internet Explorer: 11.0.26100.1882
npmPackages:
@tanstack/react-query: ^5.74.7 => 5.74.7
@trpc/client: ^11.1.1 => 11.1.1
@trpc/server: ^11.1.1 => 11.1.1
next: 15.3.1 => 15.3.1
react: ^19.0.0 => 19.1.0
typescript: ^5 => 5.8.3
Describe the bug
By voiding your prefetch calls on the server (instead of awaiting), the prefetch sometimes isn't done when rendering on the server, so when using some kind of loading indicators, these will get rendered by the server. Now sometimes on the client, the data is instantly available by the prefetch, so by the time the client render starts, the data gets instantaneously rendered and the loading state gets skipped. This causes a hydration error.
This problem was also discussed on the discord: https://discord.com/channels/867764511159091230/1311314438443499621 / https://discord-questions.trpc.io/m/1311314438443499621
I'm not sure if this is a trpc or tanstack-react-query bug or if im doing something wrong.
Temporary fixes include:
awaiting your prefetch instead ofvoiding them like the docs currently say it they should asawaitdisables some of the streaming stuff- using
useSuspenseQuery(was said in the discord channel / haven't tested) - forcefully set
isPendingtotrueon the very first client-side render
Link to reproduction
https://github.com/Entropy-10/hydration-failed-trpc-clerk (note that this is not my link but from someone in the discord, haven't tested this)
To reproduce
do a prefetch call in a rsc component and not await it. in a child client-component use this query and have a loading-state and "data available"-state.
sometimes the loading state gets rendered on the server and the "data available"-state gets rendered on the client, resulting in a hydration error due to mismatch.
Additional information
No response
👨👧👦 Contributing
- 🙋♂️ Yes, I'd be down to file a PR fixing this bug!