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!
5 s
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.
