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

Question

我刚刚开始研究ReactJS，发现它为您提供了两种渲染页面的方法：服务器端和客户端。但是，我不知道如何一起使用。是使用两种单独的方法来构建应用程序，还是可以将它们一起使用？

如果可以一起使用，该如何做-
我们是否需要在服务器端和客户端重复相同的元素？或者，我们是否可以仅在服务器上构建应用程序的静态部分，而在客户端构建动态部分，而无需与已经预先渲染的服务器端建立任何连接？

Answer 1

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

客户端

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

服务器端

在这里将ReactJS视为服务器端的模板引擎（如玉器，车把等）。服务器呈现的HTML包含应有的UI，您无需等待任何脚本加载。您的页面可以由搜索引擎建立索引（如果一个页面不执行任何JavaScript）。

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

都

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

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

由于ReactJS在重新渲染之间扩散虚拟DOM，因此真实DOM不会发生突变。仅事件处理程序绑定到实际DOM元素。