Next.js SSR搭配react-query时网络面板仍显示JSON数据是否正常？

该现象属于正常情况，并非代码逻辑错误导致。

原因说明 #

• Next.js SSR 固有规则：所有通过getServerSideProps返回的props，都会被序列化为JSON格式内嵌到页面返回的__NEXT_DATA__脚本标签中，用于客户端侧的hydration渲染。你在网络面板看到的首次数据JSON，是页面本身响应内容的一部分，不是客户端额外发起的独立接口请求。
• useInfiniteQuery 特性限制：你配置的initialData仅能覆盖第一页的初始数据，当触发下一页加载动作时，后续分页数据需要客户端主动发起请求拉取，这部分请求的响应自然会在网络面板中展示。
• 常见认知修正：SSR并非隐藏接口返回JSON的万能方案，它只是把首次数据的请求过程移到服务端执行，避免客户端直接调用原始后端接口，但页面渲染所需的数据必然要传输到客户端，只要是展示在页面上的内容，用户总有途径获取，SSR仅能隐藏原始接口地址，无法彻底隐藏数据本身。

可选排查&优化建议 #

如果你的网络面板中出现了第一页数据的独立XHR/fetch请求（不是内嵌在页面响应里的__NEXT_DATA__内容），可以检查以下两项配置：

1. 确认服务端和客户端使用的queryKey完全一致，当前示例中两边的key都是['providers']，匹配规则正常。
2. 检查查询是否配置了staleTime: 0，如果缓存失效时间设为0，客户端hydration完成后会立刻重新发起请求拉取最新数据，你可以按需设置合理的staleTime避免重复请求。

另外你当前的SSR代码存在冗余逻辑：你已经调用了queryClient.prefetchInfiniteQuery预拉取了数据，可直接将queryClient脱水后的状态作为props传递，不需要手动拼接providers的分页结构，不过该问题不会影响你当前观察到的现象。
如果不想暴露原始后端接口地址，可以给无限查询的请求封装一层Next.js API路由做转发，用户在网络面板仅能看到你自定义的API路由地址，不会暴露后端源站信息。

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