reactJS from the guys at Facebook is a really nice javascript UI framework. It powers the Facebook UI which in my opinion looks good, is responsive, and is easy to use.

One thing that concerns me with javascript is Search Engine Optimization (SEO) - it is great to have a nice UI, but if noone is getting to your site it is somewhat pointless. This is definitely a consideration when using a framework like react to potentially build your whole interface. It is no longer a case of the googlebot missing a few interactive elements of your site, but rather has the potential to result in a completely unindexable website.

Fortunately the guys at react/Facebook are well aware of this and built in a provision to help developers with this problem: renderComponentToString

The basic premise around using this method in relation to SEO is that you build your initial interface on the server side and display it when a http request hits your website. You then initiate the client side rendering of the same react component into the containing division once the page has loaded. React will then attach event handlers to take control of the content displayed.

The other piece of the puzzle is of course finding a way of executing javascript on the server.

My first thought when I heard server side and javascript was Node. On further consideration however I decided to investigate PHP's implementation of the v8 javascript engine namely v8js.

My reasoning for this was that by rendering my javascript with PHP I would reduce the complexity of the setup, have (to a greater extent) a DRY codebase (by easily and efficiently reusing the same javascript for both the server side and client side rendering), and be able to integrate more easily with my build scripts. In addition to this, my initial thought as regards a node setup seemed slow and inefficient - having a node server executing the javascript which one could hit with a CURL request.

Given that I knew I would have to write a wrapper class around whatever was rendering the javascript it seemed more logical to build it around v8js.

I also asked about it and Ben Alpert - one of the guys working on react pointed me in the direction of v8js.

Stoyan gives a good overview of how one can setup react with v8js. This was my starting point when setting things up. Of course to deploy a production ready site using such a setup there are certainly a lot of additional considerations. Furthermore the v8js php extension is complex in nature and there is not much in the way of documentation or tutorials.

A few issues that I encountered were:

  • memory usage rendering javascript server side
  • the lack of a 'real' DOM server side, meaning either working with a fake DOM (jsdom for example) or avoiding javascript requiring a DOM

I currently have one of my websites running in production with such a setup. It was a complex initial setup, but working with it once you are set up is an absolute pleasure. My site is being indexed.. so it works, and I have a beautiful client facing react interface.

I went down the line of setting this up to work with PHP. It is however perfectly possible to implement a similarly premised setup with any codebase. Pete Hunt (another member of the react team) mentions here how Instagram uses a combination of node and python.

I would certainly be interested to here how others have setup server side javascript rendering for the purposes of SEO, and if anyone has any questions about my setup I would be happy to answer them.