React Server Components 无法访问或操作浏览器 DOM

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 字符串。

• 若需服务端注入 CSS 变量：可在 SSR 阶段（如 Next.js 的 generateMetadata 或自定义 _document.tsx）通过字符串拼接或 dangerouslySetInnerHTML 注入

// Next.js App Router 中的 layout.tsx（SSR 上下文） export default function RootLayout({ children }: { children: React.ReactNode }) {   const themeColor = process.env.NEXT_PUBLIC_THEME_COLOR || '#3b82f6';   return (