React v16 hydrate 和 renderToNodeStream 与 render 和 renderToString

Question

I've read about the differences between hydrate and render and also between renderToNodeStream and renderToString and then I tried to create a sample project to demonstrate the difference. From all the tests I've done I couldn't find any difference in the behavior between these new functions.

For example, I've created a simple Hello World program where the "World" is a parameter of my App component and both my server.js and browser.js uses the shared App component to set the parameter (in the server the parameter value set to "World" and in the browser the parameter value set to "Me"). As I would expect, when I run the application using the hydrate function inside the browser.js it should ignores the difference because as I understand hydrate shouldn't change the component values but only add event listeners. But When I run the application I see Hello World and after few miliseconds it becomes Hello Me (which is what I would expect from render and not hydrate).

Also I tried to test the new renderToNodeStream function by creating a sample app where the data from the server comes slowly. I would expect my app to run while the server transfering chunks of data to the client but it seems to work exactly as renderToString (all the component string comes at once).

Can please someone assist me and explain what I'm doing wrong?

Answer 1

The performance won't have significant difference when the size of the component is small. The difference between renderToNodeStream and renderToString is renderToNodeStream will have renderer extended from stream.Readable

I think when the component's size getting huge(eg 10MB), renderToNodeStream will send piece by piece as the component parsed while renderToString will wait the parse finish then send the whole thing. I haven't did any test but I assume renderToNodeStream will have a better performance.