The concept

In the last couple of years javascript based single page applications (SPAs) have been in used immensely across the web. Although there has been a challenge to achieve great SEO, SPAs are still among the favourites. Although there are server side rendering (SSR) techniques and frameworks like Nuxt, Angular Universal and React DOM server, they might not be suitable in all cases. Specially with the complexity of the setup and the server load they bring in.

On the other hand SPAs bring in a lot of advantages as they are easy to setup, light weight and also have a smaller learning curve for development. In order to solve the SEO problem in SPAs a concept called pre-rendering came into existence.

In simple words pre-rendering or dynamic rendering is a technique which helps your SPA increase its Search engine ranking . In this method the pages of the SPA are pre-rendered and stored/cached on a server/cloud which are then accessed by all the crawlers or indexing bots (User agents). This will help the search engine user agents index all the pages i.e static ones and also the dynamic ones with javascript. This concept is highly recommended by google too. You can learn more about it here.

The above diagram is a pictorial representation of pre-rendering. When the user accesses the SPA via browser the web page with HTML+JS is served. But when the user agent i.e Google bot in the diagram tries to crawl a url the server provides the same HTML+JS, then the Renderer compiles it and serves it as a Static HTML. Prerender IO does this rendering and caches the Static HTML on cloud and provides this to any bot when required quickly. Hence the SPAs now become highly SEO friendly. Prerender IO removes the hassle of rendering, caching, refreshing the cache when the changes are made. Hence I would recommend it as a highly efficient solution.

The setup (Nginx)

The config below must be pasted in your nginx.conf file. The below code is tested and successfully used in a large scale production application. This code has additional user agents which are not listed in the standard documentation of prerender.io.

I have used this code in Vue, Angular and React projects and works successfully with all of them. Currently this setup is deployed in a Kubernetes environment via an nginx web server inside the pod for a vue application. A sample vue application for the same can be accessed in my github here.