Thanks for such a neat introduction to React, and its client-side solution. I’ve never heard about that part.

I’m wondering now if all the efforts I’ve put into Angular might have been better directed to React :-p

Oh well, the more one learns, the better… I guess ;)

Great article, there’s something magic about the first time you open the Network tab on dev tools on a React app and watch nothing happen when you navigate around.

One teeny tiny correction, on “CLIENT-SIDE RENDERING” section it talks about updating `views/index.js` but it should be `views/index.ejs`.

Thanks for taking the time to create this article.

Jack, brilliant article. This is a very gentle introduction to pretty much that’s how right now; I had never paired React and Webpack with server side rendering and I’m surprised at how painless a very simple implementation can be.

I do have a question, though. Naturally, the routing works perfectly well on the server when hitting /about directly. When running on the client though, trying to refresh a page from /about directly triggers a route: it’s expecting the hashbang. I was under the impression that react-router took care of this magic on its own but apparently it does not! How does one go on about making sure that seamless routes between server and client are handled correctly?

Once again, thanks for the very clear, concise and well written article!

Nice tutorial, very clean and easy to understand. But I agree with Greg Guepy, that disabled JS in browser is not a thing to care about today :).

My company has open-sourced a real project (that is in production already) https://github.com/webbylab/itsquiz-wall . It covers a lot of issues beyond this tutorial, like data fetching, working with styles, choosing components library etc. Maybe it will be useful. Moreover, several days ago I wrote a post about this issues – http://blog.koorchik.com/isomorphic-react/

This article is fantastic. Not only is it a great introduction to isomorphic JS with React, but also to writing node/express and other server-side JavaScript in ES6. There aren’t many resources out there yet.

Thanks!

Users with JS disabled on their browsers may not be an issue, but SEO certainly is.

Yes, Google may now index pages that are generated by JS on the client, but not all search engines do that.

And all other things being equal, Google ranks faster loading pages ahead of slower ones. So which page do you think that Google is going to rank higher? A page that comes down from the server with all of its HTML already in place, or one that has to download a load of JS to generate its HTML? Keep in mind that for the latter, the JS has to download, parse then execute before the user even sees anything!

For me, there is added value in rendering server-side. The whole point of React was for faster rendering on mobile devices. The less work a mobile device has to do, the better for its user. Devices are wide in spec and capability, but they all load content. Let the server do the grunt work, then the mobile device only has to consume the html.

Browsing the web on a mobile device remains – for many – a rotten experience. Not everyone has, or wants to, spend lots on a mobile. Think about parts of the world where data consumption can be very costly, or is subject to frequent bouts of dropped connections. Articles like this show a way forward to make the mobile web a better experience for all.

Thanks for the nice introduction.
I would also like to note that server side rendering can be very useful if many of your users use proxy browsers like Operamini where JavaScript is almost not supported.

I noticed the server side only handles GET requests. How would the above example be extended to support POST requests too.

If you want to try it, I put this code to work on Heroku – https://github.com/keemor/universal-react-es2015

This is awesome! Isomorphism is one of the things holding me back from diving into a framework. Have you used this technique on any projects which interact with an API for their data store? I’d love to see more complicated code samples :)

Is there a chance that we may get to see this tutorial re-worked without using EJS please. Also, why was the routing defined using an object instead of JSX?

Playing devil’s advocate here… or maybe not… but should we even really care about the .x% of users with JS disabled? Can you even really use the web well without it in 2015?

I think the beauty and usefulness of the isomorphic aspect of React lies not in serving non-JS users but in serving search engine bots. As far I’m concerned, that’s the reason to use it.

Aside from that, why spend so much extra dev time for a marketshare that is virtually non-existent? And if your content is behind a login… than full on JS with no guilt!

I do agree that rendering on server side helps in case javascript is disabled but in general it is not recommended. It causes heavy load on the server.