7

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!

Improve this question
2
  • Check this out. Also freely Available in GitHub.
    – N00b
    Commented Mar 13, 2016 at 14:31
  • 1
    I've been taking a look at next.js to do isomorphic react + wordpress
    – Cody Moniz
    Commented Jan 24, 2018 at 21:33

5 Answers 5

Reset to default
12

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.

Improve this answer
5
  • Very extensive answer, thank you! I've begun fiddling with AngularJS together with WP and I'm having a bad time due to how permalinks etc works with WP. Ideally I will separate them and only use WP to serve the data and let Angular live as it's own app. I'm not quite certain how the file structure would work. Do you have any tips? Put Angular in root and WP in a subfolder? I want the URLs to make as much sense as possible site.com/wp-admin would be swell. Think I'll just use PhantomJS or what not to handle SEO from here on.
    – INT
    Commented Jun 24, 2015 at 23:37
  • I've just finished a project with Angular on WordPress, but it was very custom and didn't have a blog. It was still a pain. What I did was constructed the router to mimic the permalinks I actually used (custom-post-type + pages), and ignored everything else (blog, pagination, etc.). I only used the index template so everything fell through to it, and put what php content I output (for the robots) into the ng-view, but then hid ng-view (unused in app). This probably wasn't the best way, but as you said, permalinks were a pain.
    – WraithKenny
    Commented Jun 25, 2015 at 0:49
  • I didn't have to solve it for this project, but I think a library would need to be written to handle all of the php logic in deciding what endpoint goes with what template. In addition, a request to the API would have to be done in some (all?) cases before the type of content was known to even be able to assign the proper controller/template. Perhaps it'd be better to create a wp-ajax handler that parsed and responded with that data in every route request, since it likely is needed anyway.
    – WraithKenny
    Commented Jun 25, 2015 at 1:08
  • developer.wordpress.com/calypso is an updated answer to this question!
    – Summer Developer
    Commented Nov 26, 2017 at 18:28
  • Calypso is basically a replacement for the WP Admin, not for themes. You could use this for building an app that isn't really a theme. But you can't really use it to build a general purpose theme that is compatible with php plugins.
    – WraithKenny
    Commented Nov 27, 2017 at 15:04
4

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/

Improve this answer
1
  • From what I understand, WordPress.com, in their move to Calypso, actually serves the admin screen (html) off a Node.js server, (probably for Isomorphic rendering) ... Which is just not using WordPress's PHP for templates (or probably routing either). If you'd like to do the same for your theme, you'd need a Node.js server in addition to your Apache server ... Or not do isomorphic.
    – WraithKenny
    Commented Dec 4, 2015 at 16:54
2

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.

Improve this answer
1

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.

Check out the architecture diagram here

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 :-)

Improve this answer
1

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.

Improve this answer
1
  • hmm, it is customary to indicate when you are the "owner" of whatever is at the other end of the link.
    – Mark Kaplun
    Commented Jun 3, 2017 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.