Server side rendering with fetched data

[xmityaz]

Hi! Thank you for a nice library!

I'm trying to saddle server-side rendering for my app so I'm wondering...
Is it possible to use react-async-component to load all the data which is fetching in componentWillMount method at the server and then return the fully loaded component to the client? So instead of preloaders the user will be able to see a page with some loaded data.

I'm trying to implement such example, but I'm basically having 2 times of calling render and componentWillMount method without waiting for promises.

[ctrlplusb]

I have some interesting ideas around this, and actually have another library that helps with this (react-jobs). Under the hood that library and this one both use react-tree-walker so I am thinking allowing for an integration layer to exist between multiple libraries that use react-tree-walker. In this way you could resolve multiple async units from either react-async-component or react-jobs and not have to worry about which one would get resolved first etc etc.

Stay tuned.

[ctrlplusb]

Interestingly though as you are returning a promise you could have a step within the promise chain that does data loading (e.g. a redux-thunk that returns a promise), before finally resolving the component.

This would be a pure react-async-component implementation then, but I haven't had time to play with this idea either.

[xmityaz]

Cool, thanks!
Will try both these ways.

[ctrlplusb]

@xmityaz let me know how you got on. It would be great to take your pain points under consideration for when I try out my solutions. 😀

[xmityaz]

I've switched to react-jobs library. It actually more suitible for my project at this point and it works great. It would be great to see the combination of these two libraries throught.
I've also tried to solve my problem with data fetching in promise chain in react-async-component, but it didn't work for me (unfortunatelly I don't remember the exact reason 🙂)

[ctrlplusb]

FYI to everyone, you don't need to use react-jobs. You can provide your own implementation using the API provided by react-async-bootstrapper. It will interop with this library. :)

[dlebedynskyi]

@ctrlplusb can you give example of this together with async component? Atm we have separate await for data loading promises using custom hoc. Would like to see how this can be simplified

[stereobooster]

I have another problem with SSR and code split. I wonder if anybody else is seeing it?

So I did prerendering, and I have code splitting and I have <link rel="preload"> to speed up download of chunks. But the problem is that async component loading triggers redraw of pre-rendered content. Did you see something like this?

P.S. Full code here https://github.com/stereobooster/an-almost-static-stack, I use react-loadable, not react-async-component, but I suppose it will be the same for any "loadable" solution.