我最近开始研究SSR（服务器端渲染），其优势给我留下了深刻的印象。仅举几个加载时间，SEO，没有javascript配置。
但是我试图了解一下反应服务器端渲染是否值得。 React以其虚拟DOM操作而闻名，但是将react与服务器端渲染一起使用不会带来reactJs的好处。
有人可以提出使用ReactJS进行服务器端渲染的想法吗？
答案 0 :(得分：0)
在React中使用服务器端渲染不会并不暗示。React将不会在客户端使用。
一种完全有效的方法是仅从客户端渲染开始。在这种情况下，您必须在HTML文件中设置一个HTML元素，一旦加载它就将成为React的钩子。
仅举一个例子，假设我们在服务器上通过HTTP GET <div id="root"></div>路径在index.html文件中有一个/元素。初始文档（在我们的情况下为index.html）也应引用包含React和我们的代码的javascript文件。可以通过在<script type="text/javascript" src="/index.js"></script>标签之前添加</body>之类的东西来完成。
在执行index.js的某个时刻，调用ReactDOM.render()方法（注意：我们现在在浏览器中）-这是React在寻找带有{文档中附加的{1}} ID。找到之后，它变成root-组件树安装在此元素下并由React管理（即，虚拟DOM，事件处理程序，状态更新）。
请注意，这种方法要求至少获取，解析和执行一个JavaScript文件，然后浏览器才能向用户呈现有意义的任何内容（空div除外）。在某些情况下，这是不可接受的，这是SSR（服务器端呈现）可以提供帮助的地方。
服务器端呈现要求您的服务器上具有JavaScript运行时环境。流行的选择之一是Node.js（其他包括例如Nashron for JVM）。
在方法中，您在服务器上执行React并使用react-root（或ReactDOMServer.renderToString()）方法生成发送到客户端的HTML响应-而不是只有一个占位符div的几乎为空的响应如前所述，现在您可以发送将从组件树生成的所有标记（此处重要的注意是，在React 16.4（+）中，仅在服务器端调用ReactDOMServer.renderToNodeStream()生命周期方法）。将带有文档的初始响应发送到客户端后，浏览器可以在UNSAFE_componentWillMount甚至完成下载之前呈现初始标记。一旦完成，index.js方法就会启动。水化过程是使用现有服务器端呈现的标记并将其与事件处理程序之类的javascript好东西“浇水”的过程。完成后，该组件树现在将由React完全管理，并具有所有好处。
请注意，在SSR中，完全相同的组件树在服务器端呈现，然后在客户端进行合并。
当然，React也可以代替模板引擎用作功能非常强大的静态HTML标记生成器。您需要做的就是使用ReactDOM.hydrate()在服务器上呈现标记并将其发送给客户端。应该注意的是，这种方法对性能有重大影响（https://malloc.fi/performance-cost-of-server-side-rendered-react-node-js），并且使用的React功能数量非常有限。