React-Router-4/Redux w server-side rendering (very close, help needed)

[rolele]

This is probable not ready for merge. I think there is some unuseful export and also quite a bit of console.log.

Now I think, I am pretty close to have a fully working solution but I need help to solve a problem in particular.

Let me explain the solution first:

• src/routes.js is the static config file v4. I need this object to do server-side rendering. I use react-router-config to do that
• src/server.js fetchBranchData will use the helper from react-router-config and run the route.fetchData function
• route.fetchData will run the static fetchData function of the component. (I pass dispatch so this will feed redux)
• everything is Promises so I can do fetchBranchData(location).then(data => { ...

The problem I have: Let say I am trying to test server-side rendering on a BlogArticle: http://localhost:3000/blog/the-wizard-of-oz

• The static fetchData function execute and the store is feed with the article (good).
• When ReactDOMServer.renderToStaticMarkup execute the componentWillMount of BlogArticle is triggered again which trigger a second request on the server setting the loading boolean to true.
• the state that get attached to the html is having this loading boolean to true which will trigger an error on the client saying:

    // generated is different on the client or server:
    // (client) 1 data-reactid="27">Loading...</h1></art
    // (server) 1 data-reactid="27">Alice in Wonderland<

  You will find comment on modules/Blog/redux.js about that. I would like some help to get around that. All the logs should help get up and running debugging this problem.

Anyone would like to help on that one?

[rolele]

Actually I fixed it. I defined componentWillMount in BlogArticle instead of a componentDidMount (which is not executed on server-side)

[CrocoDillon]

Thanks for this! I just don't have time to go over the code in detail yet but will do that in the next few days.

One thing I can say is that I'd like to keep the scope of the PR limited to updating to RRv4. Changes regarding code style, white space, adding Babel transforms (isn't that included in stage-0 preset?), adding favicon etc. just pollutes the diff.

Regarding code style I might convert this repo to use Prettier someday since that's what all the cool kids are using nowadays. But not yet 😄

[rolele]

Sure @CrocoDillon , I spend so much time on this I actually do not have time to rework this PR but you should be able to pick and choose only the essential parts to perform the update to rr4. Cheers

[CrocoDillon]

Sure thing, I appreciate it! I'll probably have time in the weekend :)

Cheers

[CrocoDillon]

Bit later than I wanted but it's merged (with some changes from my side)