Client side must use render provided by this library

[Sinewyk]

If you generate server markup with this project, you cannot use the standard ReactDOM.render; you must use the render method in react-dom-stream

Any reason for this ? The markup generation strategy should have no impact on its reuse once client side code is being executed no ?

[th0r]

@Sinewyk During server-side rendering React generates checksum (hash) for rendered markup.

If it matches during client-side rendering, React will reuse server-generated DOM and just attach events to it.

If it doesn't, React will throw away all the server-generated DOM and render the "proper" client-side DOM again.

By default React takes this checksum from the root element's attribute data-react-checksum, but in case of react-dom-stream you just don't know it by the time you write this element's html to the stream.
This is why you have to explicitly pass it to the render method on client.

[Sinewyk]

So, theoretically we could do a one liner to attach it manually and use the standard ReactDOM.render, or you could stream that one liner at the end of the parsed html to do it yourself no ?

[th0r]

@Sinewyk This is exactly what react-dom-stream does: https://github.com/aickin/react-dom-stream/blob/master/index.js#L12

[Sinewyk]

For once, I should have looked at the client side implementation first before opening my mouth.

Sorry about that 😊

[th0r]

@Sinewyk Np)

[aickin]

Thanks for the discussion on this, @Sinewyk & @th0r! (It was especially cool to have an issue opened, discussed, and closed all while I was asleep!)

One thing to add: I'm strongly considering getting rid of the client side part of react-dom-stream, but I only had the implementation idea in the middle of last week, and I haven't tested my idea enough yet (also: I'm busy working on v0.2.x, which is more async and uses streams in a smarter way).

Just so you know, and so I get it written down: the basic idea would be for react-dom-stream to go ahead and output a JavaScript inline block after it renders the HTML. That block would do two things:

1. Set data-react-checksum on the rendered root element.
2. Remove the JavaScript block itself from the DOM.

Step 2 is necessary because React will get wonky and have errors in render if there are nodes under domElement that weren't rendered by React.

I'm not 100% sure how modern browsers will react to a JavaScript inline block that removes itself from the DOM before onDomReady. I know that IE6 and IE7 used to error out if you modified a node that had not yet been closed, but that was fixed for IE8.

tl;dr: it will require a lot of testing, but there's a chance that in the future you will be able to just use vanilla react-dom to connect to server-generated markup. Cheers!

[aickin]

FYI, I just released version 0.2.0, which allows you to use React's client-side render method. Enjoy!