Implementing Isomorphic JavaScript (React JS) in Wordpress?

Question

I'm about to start with a new project and would like to incorporate React as I want to learn more about it and this specific project would be perfect to get started as it's not that time sensitive and pretty straight forward.

To take care of SEO I've gathered that I need to go the Isomorphic route (this is entirely new to me) to render JS server side. I found this but I can't figure out how I apply this in a Wordpress based web app? I've been googling for information about how to work with Wordpress and React, but there's literally no information about it. Could anyone with a little more insight provide me with some tips and pointers?

If it makes any difference I'm using Bedrock with the brand new Sage theme.

Thanks!

Answer 1

I don't think using React.js without Node.js (or at least V8 or rhino etc) counts as isomorphic, as isomorphic means that you are building JavaScript to run in the browser AND on the server. Specifically, using WordPress certainly means you aren't doing isomorphic javascript (its PHP software).

What you could do is use WordPress as a REST API server, and use React as a client for that. Now you can have WordPress deliver your assets, but you could also put it in a subdirectory, and treat it only as an API app with a CMS admin area, while putting your site files in the root, by-passing configuring a theme at all. (SEO would become a separate concern here that you'd have to solve, depending on the type of app you are developing.)

You mention SEO and server-side rendering, so I take it the part you've gathered is that you want compiled html delivered to crawlers (instead of JS that they won't understand), but WordPress does this by default (albeit with PHP, not JavaScript and therefor, not isomorphic), but if your concern is only SEO, isomorphic isn't strictly needed.

You can have WordPress's theme output everything you need for SEO (minimally) and then load your React (or Angular or whathaveyou), to build your app for humans with JavaScript enabled browsers (via bootstraping/DOM replacement). You'd then have to additionally take care that your routes matched WordPress's permalinks, which is a bit tricky. Not the same as isomorphic, but good enough.

Alternatively, you could use React.js to only 'enhance' the theme (like for a comments section), but you'd mostly be a PHP/WordPress dev at that point.

Isomorphic is like Meteor.js, and projects like that, that let you specifically avoid PHP (and avoid WordPress). Mutually exclusive really. If you are really interested in isomorphic, try Meteor.js and avoid using WordPress altogether.

Answer 2

I think we're not far away from being able to achieve this in a pretty sensible way. The WordPress.com website has already moved over to a JavaScript application powered by a REST API with Node.js and React.

Moving the core WordPress software over to newer technologies like this will take time, but if you add plugins such as WordPress REST API you should have everything you need to be able to get started with React in WordPress.

Relevant reading: http://wesbos.com/wordpress-calypso-react/

Answer 3

I've been building an app in Rails that uses react JS heavily. It's a good project to work on because it's giving me the baseline understanding on how React works. Knowing what I know about React, I'd highly recommend not using it with WP until you get a grasp on it initially, I think it'll make your learning process much longer trying to hack it into WP.

Combining React with Wordpress feels like taking a supercar off-roading. Maybe learn to drive the supercar first.

Answer 4

Here's an example I just came across today.

USTWO.com have built the site with the same requirements and their source is available here.

https://github.com/ustwo/ustwo.com-frontend

The also have a nice description on how they set it up. See diagram below.

Disclaimer: This is not really an answer but more of a reference link that should be added as a comment, if only I had enough credits :-)

Answer 5

What you are trying to do is best achieved by putting a node.js server in front of the wordpress API. You need node.js on the server to do server-side react.

Here is some code that shows how to render wordpress content as React components on the server and to attach the same React components on the client.

Note that in this scenario you get the benefits of wordpress for content creation but not for publishing. You need to implement publishing from scratch as React components.