react server components 运行在服务端，不执行浏览器环境代码，因此无法访问 `document` 或任何 dom api；css 变量等运行时样式逻辑必须交由 client component 处理，或通过服务端预渲染（ssr/ssg）+ 字符串注入等方式间接实现。
React Server Components（RSC）本质上是纯函数式、无副作用的服务端渲染单元，其设计目标是零客户端 JavaScript 打包体积与高效数据流协同。正因如此，RSC 在 Node.js 环境中执行，完全脱离浏览器上下文——这意味着 window、document、localStorage、事件监听器、CSSOM 操作（如 element.style.setProperty() 或 document.documentElement.style.setProperty()）等全部不可用。
// ❌ 错误：RSC 中直接操作 DOM —— 运行时报错 ReferenceError: document is not defined
export default async function ServerPage() {
const data = await fetchAPI();
// 下面这行会在服务端崩溃
document.documentElement.style.setProperty('--theme-color', data.color);
return {data.content};
}
RSC 渲染的是 React 的序列化虚拟 DOM 描述（一种紧凑的 JSON-like 数据结构），而非真实 HTML 字符串。例如，一个
在 RSC 响应流中可能被编码为：
["$","div",null,{"className":"card","children":["Hello"]}]
该数据由客户端 React Runtime 解析并挂载为真实 DOM——因此，所有依赖真实 DOM 的操作（包括 CSS 自定义属性注入、元素尺寸测量、动态样式计算等）只能发生在客户端生命周期内。
✅ 正确实践：分离关注点，合理分工
-
数据获取 & 初始状态 → RSC
在服务端安全地 fetch 数据、校验、转换，并将结果作为 props 传递给 Client Component。 -
DOM 操作 & 动态样式 → Client Component
使用 ‘use client’ 标记启用客户端能力，在 useEffect 中安全操作 DOM：
// ClientComponent.tsx
'use client';
import { useEffect } from 'react';
export default function ThemeSetter({ themeColor }: { themeColor: string }) {
useEffect(() => {
document.documentElement.style.setProperty('--theme-color', themeColor);
}, [themeColor]);
return null; // 无 UI，仅副作用
}
// ServerPage.tsx
import ClientThemeSetter from './ClientThemeSetter';export default async function ServerPage() {
const { color, content } = await fetchThemeData(); // 服务端获取
return (
{content}
⚠️ 注意事项与替代方案
-
不要混淆 RSC 与 SSR：RSC ≠ 传统服务端 HTML 渲染。Next.js 的 App Router 同时支持 RSC 和 SSR（如 generateStaticParams + fetch 的静态生成，或 dynamic = 'force-dynamic' 触发每次请求 SSR），但 RSC 本身不生成 HTML 字符串。
