Displaying a server side rendered reactJS component within a PHP application

Question

I have previously used reactJS on another project. When building said project i noticed a downfall namely the loss of SEO benefit associated with JS rendered components.

I am rebuilding an old project and I would like to replace some of the Javascript with ReactJS.

For example, a multi step form - I'd like to replace it with a stateful component that displays the correct stage as required.

I would however like to maintain the SEO aspects of the page by having the first step spiderable.

To achieve this my research implies that I should be using React's React.renderComponentToString

Having researched the issue my thought process is that I should render the components server side using node.js and then serve them up within the browser. The component is then re-added per say to add the client side functionality. My first question is as to whether this is a suitable approach? Is there a much simpler approach that I have overlooked?

Pete Hunt mentions here (https://groups.google.com/forum/#!msg/reactjs/eUespJPdyas/hmJywyo9ZSwJ) that Instagram uses/used Django and had a setup similar to what I imagined.

My app is written in php using phalcon. My question essentially relates to this statement:

Node will then return the HTML that makes up the component. Django takes that HTML and inserts it into the DOM via normal Django templates.

How do I go about doing this within PHP? I don't want this component rendered behind the scenes and used when requested, but rather rendered when required by PHP with passed parameters.

I found this question (Sending messages from PHP to Node.js) which got me thinking that one approach is to simply use CURL to query the port my node instance is listening on to get the html which I then output.

My concern here is that all my experiences with CURL have suggested that it is very slow. I don't want my page load times to decrease dramatically just to get some SEO benefit.

Could anyone advise on the above questions/my direction?

Many Thanks

Answer 1

Stoyan Stefanov created a library for calling into the V8 JS library from PHP code for doing this sort of thing; it's available here:

https://github.com/reactjs/react-php-v8js

You can read about how he set up React server rendering in these two posts:

http://www.phpied.com/server-side-react-with-php/
http://www.phpied.com/server-side-react-with-php-part-2/

Rendering won't be instant, but it should be reasonably fast. If you're having performance problems and caching doesn't help, you can consider using Google's AJAX crawling feature in order to use server rendering only for Googlebot but not normal requests:

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

Note that browsers will also take advantage of server-rendered markup so even if the initial request is slower, rendering may be faster.