react server components 运行在服务端，不执行浏览器环境代码，因此无法访问 `document` 或任何 dom api；其渲染产物是序列化的虚拟 dom 指令，而非 html 字符串，故 css 变量等运行时 dom 操作必须交由 client component 完成。
React Server Components（RSC）本质上是纯函数式、无副作用的服务端计算单元。它们在 Node.js 环境中执行，不挂载到真实 DOM，也不具备浏览器全局对象（如 window、document、localStorage）。RSC 的核心职责是：安全地获取数据、组合 UI 结构、生成轻量级的序列化指令（如 [“$”,”div”,null,{“className”:”card”}]），再由客户端 React Runtime 解析并渲染为真实 DOM。
这意味着以下操作在 RSC 中严格禁止且会直接报错：
// ❌ 错误：RSC 中 document 未定义
"use server";
export default function ServerComponent() {
// 运行时抛出 ReferenceError: document is not defined
document.documentElement.style.setProperty("--theme-color", "#3b82f6");
return Hello;
}
为什么不能操作 CSS 变量？
CSS 自定义属性（–foo）是浏览器渲染引擎在样式计算阶段读取的运行时状态，依赖于已挂载的 document 对象。而 RSC 输出的是 JSON-like 序列化结构，并不生成或修改 HTML 字符串——它甚至不“知道”最终 HTML 长什么样。真正的 HTML 构建发生在客户端（或 SSR/SSG 阶段，与 RSC 分离）。
正确的协作模式：RSC + RCC
推荐架构是职责分离：
