反应服务器端渲染性能问题

时间:2020-10-15 17:23:07

标签: reactjs server-side-rendering

我正在研究一个涉及React,Redux和其他前端库的项目。我已经阅读了很多有关服务器端渲染的好东西,这听起来很酷。因此,我同时实现了服务器端渲染和客户端渲染。我在这2个服务器之间进行了性能比较,发现服务器端渲染存在性能问题,不确定我做错了什么。我发现服务器端渲染需要大量CPU /内存资源,这大大降低了我的服务器的速度。即使在简单的页面上,也将必须处理复杂的反应,redux逻辑,其中涉及存储初始化,虚拟dom,每个请求的CSS提取。当流量很高时,情况变得更糟,有时甚至停止响应。我的项目很复杂,页面上有很多组件,其中包含许多reducer,中间件。我知道我们可以通过使用缓存来缓解这种情况,但是在我的项目中,我有成千上万的页面,并且内容需要根据url参数动态呈现,并且不能过时,因此缓存不是可行的解决方案。即使具有缓存,如果页面命中缓存,其呈现速度也比客户端呈现速度更快。缓存过期后,服务器将再次变慢。我也觉得这种体验有点怪异,因为从内容开始渲染到完成完成所花费的时间比客户端渲染要长得多。总体而言,客户端渲染感觉更加流畅。知道为什么吗?

1 个答案:

答案 0 :(得分:0)

仅用作客户端(CSR)库的React有效地减轻了服务器的负担,无需执行除提供文件之外的任何其他操作。所有计算都在客户端(浏览器)上使用其CPU(解析和执行JavaScript,渲染React树)和网络资源(获取API端点,解析响应)进行。请注意,即使流量增加,所有工作仍可以在所有客户端之间很好地分配,服务器只需要跟上提供文件的速度即可。

此外,企业社会责任解决方案还具有至少一项容易被忽视的优势。一旦执行了初始JavaScript包并发现了资源,浏览器仍可以在获取网络资源(例如图像)时解析并执行其余代码。这样,代码流和数据流将并行执行(有点)。

这在服务器上发生了巨大变化。要渲染组件树(ReactDOMServer.renderToString / .renderToNodeStream),您需要首先获取初始渲染所需的所有资源(引入延迟),并将它们注入到应用程序的顶部。否则,React将仅呈现应用程序中不依赖任何数据的部分。渲染大型组件树是CPU限制的任务。 而且,注入状态应该被序列化,并与呈现的HTML一起转移到客户端,以便React可以水合。这要求将更多数据通过电线发送到客户端。

总而言之,启用SSR后,您的服务器将比仅使用CSR做更多的工作。