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

Question

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

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

Answer 1

对于给定的网站/网络应用程序，您可以使用 react client-side、server-side 或 both。 p>

客户端

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

服务器端

在这里将 ReactJS 视为服务器端模板引擎(如 Jade 、 Handlebars 等)。服务器呈现的 HTML 包含应有的 UI，您无需等待任何脚本加载。您的页面可以被搜索引擎索引(如果不执行任何 javascript)。

由于 UI 是在服务器上呈现的，因此您的任何事件处理程序都不会工作并且没有交互性(您有一个静态页面)。

两者

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

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

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