ReactJS服务器端渲染vs客户端渲染

Question

我刚刚开始研究ReactJS，发现它提供了两种呈现页面的方法：服务器端和客户端。但是，我不明白如何一起使用它。构建应用程序有两种不同的方法，还是可以一起使用？

如果我们可以一起使用它，如何做到这一点——我们需要在服务器端和客户端复制相同的元素吗？或者，我们可以只在服务器上构建应用程序的静态部分，在客户端构建动态部分，而不与已经预渲染的服务器端建立任何连接吗？

Answer 1

事实上，我很好奇同样的研究，虽然你正在寻找的答案在评论中给出了，但我觉得它应该更突出，因此我写这篇文章（一旦我能想出一个更好的方法，我会更新它，因为我发现解决方案在架构上至少有问题）。

您需要同时考虑这两种方式来编写组件，因此基本上在每个位置都放置if开关，以确定您是在客户端还是服务器上，然后执行DB查询（或服务器上任何适当的操作）或REST调用（在客户端上）。然后，您必须编写生成数据的endpoint，并将其公开给客户机。

再次，很高兴了解更清洁的解决方案。

Answer 2

图片来源：沃尔玛实验室工程博客

注意：SSR（服务器端渲染），CSR（客户端渲染）。

主要区别在于，对于SSR，服务器对客户端浏览器的响应包括要呈现的页面的HTML。同样重要的是要注意，尽管使用SSR，页面渲染速度更快。在下载JS文件并且浏览器执行React之前，页面将不会准备好进行用户交互。

一个缺点是SSR TTFB（时间到第一字节）可能会稍微长一点。可以理解，因为服务器需要一些时间来创建超文本标记语言文档，这反过来又会增加服务器的响应大小。

Answer 3

对于给定的网站/Web应用程序，您可以使用客户端、服务器端或两者。

在这里，您完全是在浏览器上运行ReactJS。这是最简单的设置，包括大多数示例（包括上的示例）http://reactjs.org)。服务器呈现的初始HTML是占位符，加载所有脚本后，整个UI将在浏览器中呈现。

这里可以将ReactJS看作服务器端模板引擎（如jade、Handlebar等）。服务器呈现的HTML包含应有的UI，您不必等待任何脚本加载。您的页面可以被搜索引擎索引（如果不执行任何javascript）。

由于UI是在服务器上呈现的，因此您的事件处理程序都无法工作，并且没有交互性（您有一个静态页面）。

这里，初始渲染在服务器上。因此，浏览器接收的HTML具有应有的UI。加载脚本后，将再次重新呈现虚拟DOM，以设置组件的事件处理程序。

在这里，您需要确保使用与在服务器上渲染相同的props重新渲染完全相同的虚拟DOM（根组件）。否则，ReactJS将抱怨服务器端和客户端虚拟DOM不匹配。

由于ReactJS在重新渲染之间区分虚拟DOM，因此真实DOM不会发生突变。只有事件处理程序绑定到真正的DOM元素。