浏览器如何将反应服务器端渲染中从服务器接收的 HTML 字符串转换为 HTML DOM 元素？答案

【问题标题】：How does browser converts HTML string received from server in react server side rendering into HTML DOM elements?浏览器如何将反应服务器端渲染中从服务器接收的 HTML 字符串转换为 HTML DOM 元素？
【发布时间】：2021-07-31 17:05:26
【问题描述】：

我已经开始学习 React 服务端渲染。然后我配置了“index.js”文件如下：

const express = require('express');
const app = express();
const React  = require('react');
const renderToString = require('react-dom/server').renderToString;
const Home = require('./client/components/home').default;

app.get('/', (req, res) => {
    const content = renderToString(<Home></Home>);
    res.send(content); // Statement1
});

app.listen(3000, ()=> {
    console.log("App listening to port 3000");
});

所以，在上面代码中的 Statement1，我们从“Home”组件返回字符串（因为“renderToString”将 HTML 转换为字符串。

当我检查 DOM 时，我得到以下代码：

<html>
<head></head>
<body cz-shortcut-listen="true">
<div data-reactroot="">I'm home component</div>
</body>
</html>

所以，我的问题是浏览器如何将 HTML 字符串（作为服务器的响应接收）转换为 DOM 元素，以及如何添加这个“<body>”标签？

【问题讨论】：

标签： javascript html reactjs server-side-rendering react-ssr

【解决方案1】：

鉴于 body 开始标签上有一个 cz-shortcut-listen 属性，我假设它是由 renderToString 而不是浏览器添加的。

通过查看服务器端代码的顶层和 DOM 检查器而不查看生成的 HTML 源代码来得出这个结论是一个飞跃。

（在进一步阅读之后，似乎该属性是由您安装的a plugin 添加的。不过，我关于实际查看 HTML 源代码的观点仍然存在）。

浏览器将遵循the specification for parsing HTML documents，其中包括处理带有tag omission rules 的元素的规定，例如body element。

会从The "before html" insertion mode开始，找到一个div开始标签并点击：

创建一个 html 元素，其节点文档是 Document 对象。将其附加到 Document 对象。将此元素放入开放元素的堆栈中。

将插入模式切换为“before head”，然后重新处理token。

然后这将触发 head 元素的创建等等。

【讨论】：

感谢您的回答。 “cz-shortcut-listen”是由“colorzilla”chrome 扩展添加的。但我认为您的回答不足以回答我的问题，“浏览器如何将接收到的 HTML 字符串转换为 DOM 节点？”。请调查一下这个问题。
@sinha.kushagra — 这确实涵盖了它。请阅读第一段以外的内容。如果你这样做了，你会看到我已经提到过 colorzila。