Comments (7)
@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.
from react-dom-stream.
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 ?
from react-dom-stream.
@Sinewyk This is exactly what react-dom-stream
does: https://github.com/aickin/react-dom-stream/blob/master/index.js#L12
from react-dom-stream.
For once, I should have looked at the client side implementation first before opening my mouth.
Sorry about that 😊
from react-dom-stream.
@Sinewyk Np)
from react-dom-stream.
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:
- Set
data-react-checksum
on the rendered root element. - 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!
from react-dom-stream.
FYI, I just released version 0.2.0, which allows you to use React's client-side render
method. Enjoy!
from react-dom-stream.
Related Issues (20)
- Two copies of React HOT 3
- how to use in koajs v2 HOT 2
- Component caching and react ids
- React 15 HOT 1
- prepend stream with a <!DOCTYPE html> for older browsers? HOT 8
- License? HOT 2
- Preventing errors from crashing node HOT 6
- Moving to react 15.0 HOT 8
- React attempted to reuse markup in a container but the checksum was invalid. HOT 4
- RenderStream.maxStackDepth too low
- You are manually calling a React.PropTypes validation function HOT 9
- Hangs on `<div dangerouslySetInnerHTML={{__html: undefined}} />`
- HTML Entities HOT 4
- problem: how to send 500 if a component throws an exception HOT 4
- How does it work? HOT 2
- un-rebuildable package!
- How to use react-dom-stream with react-router?
- Can i use hydrate instead of render on client side to use server generated markup?
- Rendering issue with empty span tags. HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dom-stream.