server side render with react router with data fetch

Question

I'm in the process of upgrading to version 1 of React Router and can't get the data fetching side of my code to work on the server, i.e. initial server-side render.

What I am trying to do is fetch data from the server depending on the selected route. Each component has a static fetchData method and along with a global data method I build up the data to then pass into the controller view component defined in the route config.

My code is below:

match({routes, location: req.url}, (err, redirectLocation, renderProps) => {

  fetchData(renderProps).then((data) => {
      //page specific data
      return data;
    }).then((data) => {
      //global data
      getGlobalData().then((appData) => {

        data.app = appData;

        data = Immutable.fromJS(data);

        let templateLocals = {
          "data": data
        };    console.log('trying to render');
      templateLocals.content = renderToString(
    <RoutingContext {...renderProps} data={data}/>
  );
  res.send(layout(templateLocals));
    });

  });
});

What I would like to do as before with <Handler> pre V1.0 is pass my data as props into the app (I can see that the data is correct and there as I pass it into the RoutingContext component). But what I see from RoutingContext module is that the implementation will not allow this. It only picks up history,location,params,route,routeParams,routes and not any custom props.

The example of server side render does not go this far, but am keen to understand how I should handle such an example as I upgrade?

Thanks in advance

Are you using Redux by any chance? This isn't trivial to figure out but if you're using Redux I can perhaps give you a hand. Been there, done that, with much frustration along the way I may add. — Levi Botelho
– Levi Botelho, Commented Jan 6, 2016 at 11:50
no, simply react and react-router. I had this implementation working fine before I upgraded to V1. Seems like a fairly common use case to me - but can't find any examples! — user3453133
– user3453133, Commented Jan 6, 2016 at 12:11
+1 the documentation is really lacking on this point -- it's a super common use case and something that worked before the upgrade no sweat -- I managed to get it working like I said but with Redux in the mix so it won't be exactly the same as for you -- even then though there is this bug which is super annoying... — Levi Botelho
– Levi Botelho, Commented Jan 6, 2016 at 12:14

Rodion · Accepted Answer · 2016-01-19 13:12:24Z

2

If you are using Redux, take a look also to https://github.com/Rezonans/redux-async-connect It's similar to AsyncProps, but better fits for projects that uses Redux

answered Jan 19, 2016 at 13:12

Rodion

5312 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

taion · Accepted Answer · 2016-01-07 17:42:45Z

1

Take a look at the async-props repo, which provides both an example as well as utilities for handling this sort of data fetching isomorphically: https://github.com/rackt/async-props.

answered Jan 7, 2016 at 17:42

taion

2,8371 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

server side render with react router with data fetch

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related