javascript - Reactjs服务器端呈现似乎没有改变客户端

我正在尝试优化我的大型ReactJS项目，并且我偶然发现了一个结论，即浏览器中的React代码没有利用服务器渲染的任何优势。我确信服务器端渲染工作正常，我可以看到从服务器返回的页面源中的数据，包含所有data-reactid s。

设置：服务器端代码在Node中呈现。反应版本15.0.1。我使用的是ClojureScript和朗姆酒，但它最终并不重要

测试环境：使用React.addons.Perf，将其包装在客户端的初始安装位置。

测试1 ：正确的服务器端呈现

总时间约为1.8秒，根部分的包含时间约为1.5秒。 React.addons.Perf.printWasted()没有显示任何内容。

但对我来说最令人费解的部分是React.addons.Perf.printOperations()显示一个操作："set innerHTML"与整个应用程序的HTML（例如<div data-reactroot=\"\" data-reactid=\"1\"><div id=\"wrapper\"...）。就像整个服务器端渲染结果被丢弃一样，这个客户端呈现的HTML被插入到DOM中，可能导致重新渲染。

测试2 ：校验和无效;出于目的，我只在服务器端添加了一些额外的属性。

当然＆＃34; React试图在容器中重用标记，但校验和无效。＆＃34;出现警告。

然而，其他一切与上面的Test1类似！类似的时间，以及单"set innerHTML"次操作。这证实了即使校验和是正确的，React也会忽略预呈现的标记（因为它似乎在相似的时间内执行相同的操作，无论校验和是否正确）

测试3 ：关闭服务器端渲染;返回空的挂载点容器。

时间长约0.2秒。现在唯一真正的区别是，有许多操作，其中大部分是update attribute或update styles，一个是set innerHTML {"node":"<not serializable>","children":[],"html":null,"text":null}。

问题/问题

我不知道该怎么想。 React宣称SSR是一种加速应用程序引导的方法，因为它不需要再次生成DOM树（或者更确切地说：将其插入文档中;它仍然需要进行渲染才能比较校验和，对吧？）。但对我来说似乎没有任何好处。

成功使用SSR的人可以告诉我他/她在printWasted()和printOperations()的阅读内容吗？我唯一能找到的就是这次审核：https://github.com/reddit/reddit-mobile/issues/247#issuecomment-118398416（仅限printWasted） - 我的测试都没有显示printWasted中的任何内容。

Reactjs服务器端呈现似乎没有改变客户端

1 个答案: