为何未显式预取时useSuspenseQuery仍会在服务端触发请求？

TanStack Query文档提到：

若使用useSuspenseQuery时忘记预取查询，后果取决于所使用的框架。在某些情况下，数据会进入Suspend状态并在服务端获取，但永远不会同步到客户端。

为什么未显式预取也会在服务端触发请求？ #

在Next.js App Router的服务端组件环境中，React的Suspense机制与TanStack Query的实现深度绑定：

• 服务端组件渲染时会同步执行所有代码，包括useSuspenseQuery的调用。当它检测到当前是服务端环境且查询缓存为空时，会直接触发数据请求——这是Suspense的核心设计逻辑：组件在数据未就绪时“挂起”，服务端渲染流程会等待挂起的Promise resolve后再生成HTML。
• Next.js的服务端渲染引擎会自动处理Suspense挂起：当组件因useSuspenseQuery挂起时，服务端会暂停渲染，等待数据请求完成后，再继续渲染组件并生成完整HTML返回给客户端。

具体触发机制 #

1. 环境检测：useSuspenseQuery内部会判断当前执行环境是否为服务端（通过typeof window === 'undefined'这类标识）。
2. 缓存检查：如果服务端的Query Client缓存中没有对应查询的数据，就会触发你定义的查询函数（比如fetch请求）。
3. Suspense挂起与等待：查询函数返回的Promise会让React进入Suspense状态，Next.js服务端渲染流程会等待这个Promise resolve，拿到数据后完成组件渲染。
4. 客户端同步问题：这里的核心问题是，服务端获取的数据默认不会自动同步到客户端的Query Client缓存中——因为没有显式预取（比如调用prefetchQuery），服务端的缓存数据不会被序列化传递到客户端，导致客户端可能重新触发请求，或者出现文档中提到的“永远不会同步到客户端”的情况。

内容的提问来源于stack exchange，提问作者cirex