ReactJS服务器端呈现与客户端呈现

Question

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

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

Answer 1

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

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

将ReactJS视为服务器端模板引擎(如玉器,车把等......).服务器呈现的HTML包含应该使用的UI,您不必等待加载任何脚本.您的页面可以被搜索引擎编入索引(如果没有执行任何javascript).

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

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

在这里,您需要确保props使用与在服务器上呈现的相同的虚拟DOM(根ReactJS组件)重新呈现完全相同的虚拟DOM .否则,ReactJS会抱怨服务器端和客户端虚拟DOM不匹配.

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

你需要*运行*两次相同的代码.一旦在服务器上,一旦在客户端上.但是,您需要编写组件来考虑这一点 - 例如,您不应该在`componentWillMount()`中执行任何异步数据提取,因为它将同时运行客户端和服务器.您还需要一种策略,用于在服务器上预先获取数据并使其可用于客户端上的初始渲染,以确保获得相同的输出. (10认同)
您还可以使用`typeof window =="undefined"`检查正在执行的代码是在服务器端还是客户端,然后相应地获取您的数据. (3认同)

Answer 2

注意:SSR(服务器端渲染),CSR(客户端渲染).

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

一个缺点是SSR TTFB(第一个字节的时间)可能稍长.可以理解的是,因为服务器需要一些时间来创建HTML文档,这反过来又增加了服务器的响应大小.

Answer 3

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

您需要以两种方式编写组件，因此基本上if在各处放置开关来确定您是在客户端还是服务器上，然后执行数据库查询（或服务器上任何适当的操作）或REST调用（在服务器上）客户）。然后，您必须编写生成数据并将其公开给客户端的端点，然后就可以了。

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