In my recent applications I've been using Flux (with flummox - http://acdlite.github.io/flummox) on server per request to make isomorphic rendering. Generally it looked as follows:
app.use(createFluxPerRequest);
app.get('/some-route', (req, res) => {
api.getData(data => {
req.flux.getActions('items').receiveItems(data);
next();
});
});
app.use((req, res) => {
ReactRouter.run(routes, req.url, Handler => {
res.render('base', {
snapshot: new Buffer(req.flux.serialize(), 'utf-8').toString('base64'),
appString: React.renderToString(
React.createElement(Handler, { flux: req.flux })
)
});
});
});
As you see I've been receiving data through api services however some React components make requests on client on their own.
They doing this by calling e.g. flux.getActions('items').getSomeDataAsync
action in container components (in componentDidMount
lifecycle method).
My question - is it possible (from your experience) to have some method inside container component that will be called on server to call async actions inside it?
Yes, I've been using an isomorphic API that can be called from the server and the client in a big react-based isomorphic SPA.
This library that makes it so you can build your APIs in an isomorphic fashion, and re-use it in the client and server without bloating or breaking the bundle. This is what we're currently using in a big single-page application.
It's called Isomorphine, and you can find it here: https://github.com/d-oliveros/isomorphine.
Disclaimer: I'm the author of this library.