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

Question

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

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

原文由 Simcha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

客户端

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

服务器端

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

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

两个都

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

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

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

原文由 Gautham Badhrinathan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

原文由 JSON C11 发布，翻译遵循 CC BY-SA 3.0 许可协议