22

I would like to develop themes/plugins for WordPress based on React. To make it search engine friendly, I need it to be rendered initially on the server (serverside-rendering).

The only way to do this, as far as I know, is to use react-php-v8js, which requires the PECL V8js extension. This is a problem since I have no control over the platform on which these themes/plugins will be run.

Is there a way to make React and WordPress work together without having to install additional extensions? Perhaps by building/compiling React files into PHP?

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56
  • Can you clarify what you mean by "I have not control over the platform"? I'm assuming you mean you don't have access or permission to do installations on the server of things like V8js or Nodejs, correct? There's a few solutions I'm familiar with but they involve installing one or the other. – PeterG Feb 07 '16 at 05:52
  • 1
    That's correct - I cannot install any PHP extension (e.g. v8js) or anything like Node.js. These WordPress plugins/themes will most likely run on shared hosting platforms, which don't allow this. – Yoav Kadosh Feb 07 '16 at 08:03
  • In that case the only approach I can think of is to setup nodejs or V8 on a separate server, and have your react code call it solely to do the server-side rendering. You may have to deal with some CORS issues but in theory I don't see why this wouldn't work (note I haven't actually tried this myself). – PeterG Feb 07 '16 at 20:13

3 Answers3

2

There's an article that describes how to do this:

https://sebastiandedeyne.com/server-side-rendering-javascript-from-php/

But it's a fairly complex setup and it requires using composer. That can be difficult in Wordpress projects since Wordpress tends to completely eschew the modern php architecture.

If you're looking for a library to help with SSR in PHP:

https://github.com/spatie/server-side-rendering

Best of luck on it.

Michael Ryan Soileau
  • 1,763
  • 17
  • 28
0

If you want your content to be indexed by search engine without js, you can print your minimal content using Wordpress, just the bare minimum + crucial meta tags, maybe localize some initial state for your react app to boot. A bare bone theme such http://underscores.me/ would be sufficient. When js is available, you can replace your whole WordPress generated content with React ones.

The ideal one is to have React generate the content for you. But it's hard until we can see that nodejs / PECL V8js extension available everywhere.

Ade Viankakrisna Fadlil
  • 92
  • 1
  • 1
  • 5
-1

If you can at least install nodejs and launch a node process then it should be ok, although not so simple.

You would need to generate a ssr version of your assets and use it in a node process that would listen on a socket to write the html result..

In your controller you can create a socket to your node process (something like stream_socket_client(...)) and then you can send a dummy function written as a javascript string to that socket (something like stream_socket_sendto($sock, "getResultForMyWidget(someParams){...}")). That function would be evaluated in the node process that would return the response to the controller (the html response as a ReactDOMServer.renderToString from the component you want to render).

That's it for the big picture.

There is a symfony plugin that illustates it very clearly (see this github) and comes with a dummy server node process to illustrate how it handles the socket listening and eval of the incoming function and returns the html result. See also the example in the sandbox for a bigger picture and in depth implementation. You should be able to adapt it to wordpress.

jav974
  • 1,022
  • 10
  • 22