React Server Components(RSC)在服务器上渲染，不留下JS供浏览器运行。
我的问题是，我们可以访问和操作RSC中的DOM吗?
例如，假设我们想根据从RSC中获取的数据操作CSS变量。我们可以用document.documentElement.style.setProperty("--foo", foo);来完成。由于document在服务器端不可用，我们必须使该组件成为React客户端组件(RCC)。foo将在RSC中获取并作为道具传递到RCC。但是，如果服务器也可以处理DOM操作，那么RSC提供给客户端(浏览器)的HTML+CSS+JSON包已经包含了我们知道我们想要在构建时进行的更改，这将是理想的。
有可能做DOM操作服务器端，在RSC?如果有，怎么做?
不，你不能在React Server组件中操作DOM，因为RSC不会渲染"正常"的内容。DOM:
- RSC渲染"虚拟dom"，
- 发送数据到客户端(以特殊的数据格式)，
- 客户端呈现实际UI DOM。
当然，你可以修改呈现到虚拟DOM中的内容(只需像往常一样使用React)，但是CSS变量不是虚拟DOM的一部分。一个流行的方法是使用一些CSS框架，比如tailwind。
服务器端渲染(SSR)
您可能会将RSC与服务器端渲染(SSR)混淆，因为RSC不向客户端提供HTML+CSS+JSON，如您所说。
RSC在这个意义上不做SSR，也就是说它不渲染HTML(还没有?)从服务器通过网络发送到客户端的内容是这样的:
0:["$","div",null,{"className":"main","children":[["$","section",null,{ "children":[ ... ]}], ... ]}]
仍然可以同时使用RSC和SSR。例如，你可以在服务器端使用其他库或自定义解决方案渲染HTML，你甚至可以建立一个服务器端DOM，可以使用常见的方法，如document.getElementById，但RSC不提供。
。你可以考虑使用像Next.js这样的框架(至少版本13)，它建立在React Server组件上，并提供SSR和SSG(静态侧生成)，但即使使用Next.js，我也怀疑你能操纵CSS变量，但我不确定。