Same query dehydrated many times when React flushes

[ali-idrizi]

Which project does this relate to?

Router

Describe the bug

When using deferred queries with streaming, if the suspending component contains code that may trigger a React flush (such as an <img> with eager loading, <link> tags, etc...), the same query is dehydrated to the HTML many times.

I am not sure if this is an issue with Query, or @tanstack/react-router-ssr-query, or rather how streaming works with Router/Start, however, it's easy to reproduce when using Query.

For the reproduction, I took https://github.com/TanStack/router/blob/main/examples/react/start-basic-react-query/src/routes/deferred.tsx and added some images with loading eager:

-      <Suspense fallback="Loading Middleman...">
-        <DeferredQuery />
-      </Suspense>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Suspense key={index} fallback={<p>Loading {index + 1}…</p>}>
+          <DeferredQuery id={index} />
+        </Suspense>
+      ))}

       <div>Time: {deferredQuery.data.time.toISOString()}</div>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <img key={index} loading="eager" src={`?t=${id}-${index}`} />
+      ))}

In the reproduction, the query is dehydrated 5 times:

In a real-world app, with a much more complex DOM, the same query is being dehydrated over 100 times, causing the initial HTML response to be over 18MB.

Your Example Website or App

https://codesandbox.io/p/devbox/quirky-mirzakhani-gzcwnj

Steps to Reproduce the Bug or Issue

1. Open the CodeSandbox preview in a new tab
2. Go to the Deferred page
3. View the source
4. Notice the query dehydrated 5 times

Expected behavior

The query should only be dehydrated once.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.139.10
• OS: N/A
• Browser: N/A
• Browser Version: N/A
• Bundler: Vite
• Bundler Version: 7.2.4

Additional context

No response