Reactjs server-side rendering seems to not change a thing on the client side

Question

I'm trying to optimize my big ReactJS project and I've stumbled upon a conclusion, that React code in the browser is not taking any advantage of server rendering. I'm sure that server-side rendering is working properly, I can see data in the page source returned from server, with all the data-reactid s.

Setup : server-side code is rendered in Node. React version 15.0.1. I'm using ClojureScript and rum, but it shouldn't matter in the end

Test environment : Using React.addons.Perf , wrapping it around initial mount on the client side.

Test 1 : proper server-side rendering

Total time around 1.8s, Inclusive Time of root component about 1.5s. React.addons.Perf.printWasted() shows nothing.

But what is the most puzzling part for me is that React.addons.Perf.printOperations() shows one operation: "set innerHTML" with the whole app's html (eg <div data-reactroot=\\"\\" data-reactid=\\"1\\"><div id=\\"wrapper\\"... ). Like the whole server-side rendering result was discarded and this client-rendered HTML is inserted in the DOM, probably causing re-rendeding.

Test 2 : invalid checksum; by purpose I've added some extra attribute on the server-side only.

Of course the "React attempted to reuse markup in a container but the checksum was invalid." warning appears.

However, everything else is similar to the Test1 above! Similar times, and also the single "set innerHTML" operation. This confirms for me that even if checksum is correct, React ignores pre-rendered markup (because it seems to do the same operations in the similar times whether checksum is correct or not)

Test 3 : turned off server-side rendering; returning empty mount-point container.

Times about 0.2s longer. The only real difference now is that there are many operations, most of them update attribute or update styles and one set innerHTML with {"node":"<not serializable>","children":[],"html":null,"text":null} .

Question/Problem

I don't know what to think about it. React advertises SSR as a way to speed up application bootstrap, as it does not need to generate DOM tree again (or rather: insert it in the document; it still need to be rendered in order to compare checksums, right?). But for me it seems like nothing is gained.

Can someone who is successfully utilizing SSR tell me what are his/her reading in printWasted() and printOperations() ? The only thing I managed to find was this audit: https://github.com/reddit/reddit-mobile/issues/247#issuecomment-118398416 (only printWasted , though) - none of my tests shows any entires in printWasted .

Answer 1

Well, it all was simple: after upgrading to React 15.4.2 Test 1 shows no operations, as I expected it to in the first place. So in the end it all was issue of (not so) old library version. Yet the times of mount are still very similar.