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

javascript node.js reactjs client-server

2022-08-30 02:45:29

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

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

答案 1

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

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

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

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

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

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

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

答案 2

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

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

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