ReactJS服務器端渲染似乎並沒有改變客戶端的情況

Question

我正在嘗試優化我的大型ReactJS項目，但偶然發現了一個結論，即瀏覽器中的React代碼沒有利用服務器渲染的任何優勢。 我確定服務器端呈現工作正常，我可以看到服務器返回的頁面源中的data-reactid以及所有data-reactid 。

設置 ：服務器端代碼在Node中呈現。 反應版本15.0.1。 我正在使用ClojureScript和朗姆酒，但最后沒關系

測試環境 ：使用React.addons.Perf ，將其包裝在客戶端的初始安裝周圍。

測試1 ：正確的服務器端渲染

總時間約為1.8秒，包含根部分的時間約為1.5秒。 React.addons.Perf.printWasted()什么也不顯示。

但是對我來說，最令人困惑的部分是React.addons.Perf.printOperations()顯示了一個操作：使用整個應用的html來"set innerHTML" （例如<div data-reactroot=\\"\\" data-reactid=\\"1\\"><div id=\\"wrapper\\"... ）。 就像整個服務器端的渲染結果都被丟棄一樣，此客戶端渲染的HTML插入到DOM中，可能導致重新渲染。

測試2 ：校驗和無效； 出於目的，我僅在服務器端添加了一些額外的屬性。

當然，“ React嘗試重用容器中的標記，但校驗和無效。” 警告出現。

但是，其他所有內容都與上面的Test1相似！ 類似的時間，還有單個的"set innerHTML"操作。 這為我確認，即使校驗和正確，React也會忽略預渲染的標記（因為無論校驗和正確與否，它似乎都在相似的時間執行相同的操作）

測試3 ：關閉服務器端渲染； 返回空的安裝點容器。

時間約0.2s。 現在唯一真正的區別是，有許多操作，其中大多數操作update attribute或update styles並且一set innerHTML {"node":"<not serializable>","children":[],"html":null,"text":null}帶有{"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中的任何完整printWasted 。

Answer 1

好了，一切都很簡單：升級到React 15.4.2之后， 測試1並沒有顯示任何操作，正如我最初期望的那樣。 因此，最后都是（不是）舊庫版本的問題。 但是坐騎的時間仍然非常相似。