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.
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.
Written by : Suprith Reddy
I am a serial tech entrepreneur. I believe entrepreneurship is my purpose and technology is my passion. I am naturally business savvy and my expertise is building digital products from scratch and scaling them to create impact. I give talks about technology, business and entrepreneurship.
Subscribe To My Newsletter
BE NOTIFIED ABOUT NEW ARTICLES OR EVENTS OR SESSIONS
You can get access to content with other group of entrepreneurs and startup folks.