TanStack Start and Emotion with SSR and streaming
I found this previous question and a github post about this topic:
Emotion and Tanststack Start
https://github.com/TanStack/router/issues/2867
I have verified that the approach referenced in both does work for SSR, but when I attempt to use streaming, I hit the hydration mismatch error again. It appears to be a race condition between the streamed document request completing and some component that was initially server rendered and is using
I'm trying to follow this pattern (https://tanstack.com/router/latest/docs/integrations/query) to automate SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. I've got a route that starts prefetching data in the route loader without awaiting it and then the component uses
https://tanstack.com/router/latest/docs/integrations/query
If I await the prefetches (which I think effectively opts out of the streaming of those queries), then there's no hydration mismatch error. This may also just be because it forces a different timing which happens to avoid the timing issue with Emotion, I'm not sure. But if I don't await them and try to stream the queries, I regularly hit the hydration mismatch.
I don't have a minimal repro setup yet, but can work on one if that would be helpful. I'm mostly wondering if I'm barking up the wrong tree or if there's an example that already demonstrates TanStack Start + Emotion with SSR streaming.
Versions:
@tanstack/react-start: 1.132.51
@tanstack/react-query: 5.90.2
react: 19.2.0
nitro: nitro-nightly@3.0.1-20251015-114932-a0f52cc9
vite: 7.1.9
Emotion and Tanststack Start
https://github.com/TanStack/router/issues/2867
I have verified that the approach referenced in both does work for SSR, but when I attempt to use streaming, I hit the hydration mismatch error again. It appears to be a race condition between the streamed document request completing and some component that was initially server rendered and is using
useSuspenseQuery. If the component unsuspends before the streaming completes, that seems to be when the hydration mismatch occurs. But I'm also not sure I'm following it correctly I'm trying to follow this pattern (https://tanstack.com/router/latest/docs/integrations/query) to automate SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. I've got a route that starts prefetching data in the route loader without awaiting it and then the component uses
useSuspenseQuery to stream those queries as a part of the doc request:https://tanstack.com/router/latest/docs/integrations/query
If I await the prefetches (which I think effectively opts out of the streaming of those queries), then there's no hydration mismatch error. This may also just be because it forces a different timing which happens to avoid the timing issue with Emotion, I'm not sure. But if I don't await them and try to stream the queries, I regularly hit the hydration mismatch.
I don't have a minimal repro setup yet, but can work on one if that would be helpful. I'm mostly wondering if I'm barking up the wrong tree or if there's an example that already demonstrates TanStack Start + Emotion with SSR streaming.
Versions:
@tanstack/react-start: 1.132.51
@tanstack/react-query: 5.90.2
react: 19.2.0
nitro: nitro-nightly@3.0.1-20251015-114932-a0f52cc9
vite: 7.1.9
GitHub
TipFind an working example here. Which project does this relate to? Start Describe the bug SSR with @mui/material/@mui/joy worked flawlessly without any special setup for @tanstack/start <= 1.81...
[!IMPORTANT] This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard guide, start there. What you get Automatic...
