One of the applications I use for my Kubernetes demos is http://inkl.in — it’s an Ethereum Blockchain visualisation tool that uses a Frontend (React), talking to an API (Node), talking to MongoDB that sits on a VM within an Azure private VNET. You can find the code on GitHub https://github.com/justindavies/inklin, but for today I wanted to run through using Rendertron to fix the inherant issue of Search Engine Optimisation for component based Javascript apps.

The problem with SPA (Single Page Applications) is that web crawlers aren’t that great at Javascript, and are especially bad at interpolating Javascript to get decent content for indexing.

A number of “fixes” are out there, the most prominent being Server Side Rendering (SSR). I found a LOAD of documentation out there, but I’m just a lazy person, and wanted something a bit simpler (plus my skill level on webpack is non-existent).

With the advent of things like Puppeteer (Headless Chrome), I started messing around with using it to proxy requests for my app, and then spit that out into rendered HTML for Search Engines, as well as things like Facebook and Twitter sharing for Inkl.in.

As is usual with these types of things after working on this for a while, I found out about Rendertron. Take a look at Sam Li talking about this, it’s a great solution to the problem.

Rendertron is essentially a proxy for requests where you DON’T want the client to do the Javascript execution; in this case Bots and Social Sharing scrapers. To do this, we need to look at the User Agent to see if we need to route our request to Rendertron to pre-render, or just pass through the request to the React App directly.