如何判断代码是否运行在React Server Component或客户端组件渲染环境？

下面是几种实用的判断方式，覆盖静态检查和运行时验证场景：

1. 静态检查：看文件的"use client"标记 #

这是最直接的方法——如果文件顶部有'use client';指令，整个文件的代码都属于客户端组件，无论它是在服务端预渲染（SSR）还是浏览器中执行。反之，没有这个标记的文件默认是Server Component（除非被客户端组件导入，但导入后的代码依然在服务端运行）。

2. 运行时基础判断：区分服务端与浏览器环境 #

Server Component完全在Node.js环境中运行，没有浏览器的全局对象。可以通过以下代码判断当前是否在服务端执行（包含RSC和客户端组件的SSR阶段）：

const isServer = typeof window === 'undefined';

但注意：这个方法无法区分RSC和客户端组件的服务端预渲染阶段，只能区分“服务端环境”和“浏览器客户端环境”。

3. 运行时精准判断：利用RSC专属限制或框架API #

方法A：尝试调用客户端钩子（仅调试用） #

React Server Component中不允许调用客户端专属钩子（比如useState、useEffect），一旦调用会直接抛出错误。可以利用这个特性做判断，但不建议在生产代码中使用：

import React from 'react';

function isInRSC() {
  try {
    React.useState();
    return false; // 能调用说明是客户端组件环境
  } catch (e) {
    return true; // 报错说明是RSC环境
  }
}

方法B：使用框架提供的RSC专属API（推荐） #

基于RSC的框架（比如Next.js）会提供只能在Server Component中调用的API，调用这些API如果报错，说明当前是客户端组件环境。以Next.js为例：

import { headers } from 'next/headers';

function isInRSC() {
  try {
    headers(); // 该API仅能在RSC中调用
    return true;
  } catch (e) {
    return false;
  }
}

这种方法是运行时判断最可靠的方式，因为框架API的环境限制是明确的。

总结 #

• 静态场景：直接检查文件是否带有'use client';标记。
• 运行时场景：
  • 只需区分服务端/浏览器：用typeof window === 'undefined'。
  • 需要精准区分RSC/客户端组件：用框架专属RSC API，或用客户端钩子做调试判断。

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