Next.js v12客户端渲染时服务端为何打印非空数据？

核心原因 #

你误以为页面是纯客户端渲染，但Next.js v12默认采用**服务端渲染（SSR）或静态生成（SSG）**模式，服务端会在渲染页面时执行组件内的useQuery代码，从而获取数据并输出日志，并非浏览器把日志传回服务端。

具体细节拆解 #

• Next.js默认渲染逻辑：
  除非你明确通过dynamic import设置ssr: false（比如const ClientComponent = dynamic(() => import('./Component'), { ssr: false })），或者在next.config.js中全局禁用SSR，否则所有页面默认会在服务端执行一次组件代码，完成渲染后再把HTML发送给浏览器。这时候useQuery会在服务端被调用，自然会打印出获取到的data。

• Apollo Client的服务端适配：
  如果你的项目配置了Apollo Client的服务端支持（比如在_app.js中通过getServerSideProps初始化服务端专属的Apollo Client实例），服务端会在渲染时直接调用API服务器拉取数据。你觉得服务端没权限，可能是实际配置中服务端有访问权限（比如API允许内网访问、或Next.js配置了代理转发请求），只是你没留意到。

• 排除浏览器日志回传的可能：
  浏览器的console.log只会输出在本地开发者工具里，不会自动传回服务端，除非你额外集成了第三方日志收集工具，但你没提到这类配置，所以可以直接排除这种情况。

验证方法 #

• 检查页面组件是否用dynamic({ ssr: false })包裹，若没有则说明是SSR/SSG模式。
• 在useQuery代码后加一行console.log('执行环境:', typeof window)：服务端执行时会输出undefined，客户端则输出object，可以明确区分代码在哪端运行。
• 查看Apollo Client的初始化代码，确认是否存在服务端实例创建的逻辑。

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