如何判断代码执行环境？NextJS 14 SSR服务端代码调试咨询

一、可靠判断执行环境的方法 #

• 区分浏览器/服务端最直接的方式：
  • 服务端：用 typeof window === 'undefined' 判断，因为服务端环境不存在 window 对象
  • 浏览器端：用 typeof window !== 'undefined' 或检查 window.document 是否存在
• 结合 Next.js 14 的组件体系：
  • 带 'use client' 指令的 Client Component 必然运行在浏览器端
  • 无该指令的 Server Component 默认运行在服务端，无需额外判断

二、确认 Server Action 在服务端执行且不暴露给用户 #

• 只要遵循规范定义 Server Action（比如在 Server Component 中定义，或在无 'use client' 指令的独立文件中导出），就会在服务端执行，客户端仅能看到调用请求，无法获取函数源码
• 验证手段：
  • 在 Server Action 中加入服务端专属逻辑（如读取服务器本地文件、调用仅服务端可用的 API），能正常运行则说明在服务端执行
  • 打开浏览器开发者工具「网络」面板，查看调用 Server Action 的请求，响应内容不会包含函数内部代码

三、console.log 与服务端日志、调试方法 #

• 不能仅靠 console.log 判断执行环境：客户端日志出现在浏览器控制台，服务端日志会输出在启动项目的终端窗口
• 服务端日志查看：
  • 本地开发时，启动项目的命令行窗口会实时打印服务端代码的 console.log 内容
  • 生产部署后，根据所用平台（如 Vercel、Docker）的日志面板查看服务端日志
• 服务端代码调试：
  • 本地开发时，在 VS Code 中给 Server Action/Server Component 代码设置断点，启动调试模式运行项目，断点会在服务端触发
  • 也可在服务端代码中加入 debugger; 语句，用 node --inspect 命令启动项目，连接调试工具进行调试

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