英文:
Is it possible to access the DOM in a React Server Component?
问题
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捆绑。
是否可以在RSC中进行服务器端DOM操作？如果可以，如何实现？
英文:
React Server Components (RSC) render on the server, leaving no JS for the browser to run.
My question is, can we access and manipulate the DOM in a RSC?
For instance, let's say we want to manipulate CSS variables based on data fetched in a RSC. We can accomplish that with document.documentElement.style.setProperty("--foo", foo);. Since document is not available server-side, we have to make the component a React Client Component (RCC). foo would be fetched in a RSC and passed as a prop into the RCC. However, it would be ideal if the server could handle the DOM manipulation as well, so that the HTML+CSS+JSON bundle served to the client (browser) by the RSC already contained the changes we know we want to make at build-time.
Is it possible to do the DOM manipulation server-side, in the RSC? If so, how?
答案1
得分: 3
No, 在 React Server Components 中，你不能操纵 DOM，因为 RSC 不渲染“普通”DOM：RSC 渲染“虚拟DOM”，然后以特殊数据格式将数据发送到客户端，客户端渲染实际的UI DOM。当然，你可以修改虚拟DOM中的内容（就像通常使用 React 一样），但是CSS变量不属于虚拟DOM的一部分。一个常见的方法是使用像 Tailwind 这样的CSS框架。
服务器端渲染（SSR）可能让你与 React Server Components 混淆，因为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 Components之上，提供了SSR和SSG（静态站点生成）的功能，但即使使用Next.js，我也怀疑你是否可以操纵CSS变量，但我不能确定。
英文:
No, you can't manipulate the DOM in React Server Components, because RSC don't render the "normal" DOM:
- RSC render the "virtual DOM",
- send the data to the client (in a special data format), and
- the client renders the actual UI DOM.
Of course you can modify what is rendered into the virtual DOM (just by using React as usual), but CSS variables are not part of the virtual DOM. A popular approach would be to use some CSS framework like tailwind.
Server Side Rendering (SSR)
You might be confusing RSC with Server Side Rendering (SSR), because RSC doesn't serve HTML+CSS+JSON to the client, as you said.
RSC doesn't do SSR in this sense, i.e. it doesn't render HTML (yet ?). What's sent over the network from the server to the client is something like this:
0:["$","div",null,{"className":"main","children":[["$","section",null,{ "children":[ ... ]}], ... ]}]
You still can use RSC and SSR together. E.g. you may render HTML at the server using other libraries or custom solutions, you may even build a server side DOM which can be used with the commonly known methods like document.getElementById, but RSC doesn't provide that.
E.g. you may consider using a framework like Next.js (at least version 13), which builds on React Server Components and provides SSR and SSG (Static Side Generation), but even with Next.js I doubt that you can manipulate CSS variables, but I'm not sure.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论