why markup different on server and client

[ericclemmons]

why markup different on server and client

[ericclemmons]

@gilesbradshaw Yes, I can work up a solution for you on this.

[gilesbradshaw]

I am a little confused. The server has rendered the markup - having made the asynchronous call. The client then also makes the asynchronous call - after having done it's render. Surely the point is that the call has been made on the server so it doesn't need to be re made by the client? Ie the client should just accept the markup from the server.

[gilesbradshaw]

my project is here btw - wld be grateful if you could have a look!

https://github.com/gilesbradshaw/react-flummox

http://localhost:7000/app2 brings up the warning + does async calls on both server + client

[iamdustan]

@gilesbradshaw we’ve been using this PR for all of our isomorphic projects of late: #34

Basically, you have to tell react-resolver that the call has already been made and put that data into memory (not just into markup).

[gilesbradshaw]

I wish I understood that @iamdustan - could you very kindly explain further?

[gilesbradshaw]

I have made a script on the serer which says

<script async>var __resolver__ = {".0":{"fulfilled":true,"rejected":false,"values":{}},".0.0":{"fulfilled":true,"rejected":false,"values":{"linkName":"APPPPPP","link":"app1","list":[{"id":0,"content":"ahhhh"}]}}};</script><script src="http://localhost:7001/assets/main-33d5ca2650f97c3b76c5.js"></script><script src="http://localhost:7001/assets/0.7bb83fb274f8d7d75a21.hot-update.js"></script>

now I need to rehydrate that on the client not sure how though! :)

[ericclemmons]

@gilesbradshaw Sorry this isn't public API yet!

You can instantiate a const hydratedResolver = new Resolver(window.__resolver__) on the client;

react-resolver/src/Resolver.js

Lines 7 to 11 in 0aa36af

	constructor(states = {}) {
	this.frozen = false;
	this.promises = [];
	this.states = states;
	}

And pass it in to Resolver.render via:

Resolver.render(<Handler />, document.getElementById("app"), hydratedResolver);

react-resolver/src/Resolver.js

Lines 161 to 169 in 0aa36af

	static render(element, node, instance = new Resolver()) {
	React.render((
	<Container resolver={instance}>
	{element}
	</Container>
	), node);
	return instance;
	}

That should work!

[gilesbradshaw]

got it! - actually I just did new Resolver(0 - it defaults to resolver at least in what I have - but passing resolver (or whatever) to Resolver makes sense.

Really pleased about that :)

I assume now resolver can be the whole tree of fetched data from the server. + also hopefully some of the data can not be fetched on the server and would then be fetched by the client.

[ericclemmons]

@gilesbradshaw Right. When rendering on the server, you should be able to do something like window.__resolver__ = JSON.stringify(resolver.states); to get the history.

Whatever comes back is all that's necessary to recreate the entire tree for initial load, then work as normal thereafter!

[ericclemmons]

Alright, so this is entirely solved in v2. Closing in favor of that...