CODEWITHSUNDEEP
node.jsreactjsreactjs-fluxisomorphic-javascriptflummox
Kosmetika
Kosmetika

Reputation: 21304

Isomorphic Flux - get data on server for components

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?

Upvotes: 0

Views: 257

Answers (2)

David Oliveros
David Oliveros

Reputation: 661

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.

Upvotes: 0

Ben
Ben

Reputation: 5172

Check out react-nexus

Even though it still remains a work in progress, I think that would "answer" your question

We want to keep fetching data from within the components, but have this data also possibly rendered server side - that's where "isomorphic" will really mean something to react

Too bad this isomorphic word got hyped before actually solving this issue

Upvotes: 0

Related Questions