如何解决浏览器如何将 React 服务器端渲染中从服务器接收到的 HTML 字符串转换为 HTML DOM 元素？
我已经开始学习 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>”标签？
解决方法
鉴于正文开始标记上有一个 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。
然后这将触发头部元素的创建等等。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
