I have an Angular 7 application where I am trying to pre-render pages to support web crawlers / SEO. I've decided I want to use prerender.io to facilitate the pre-rendering, caching, and serving of static HTML to these crawlers, but I'm struggling to install their middleware in my Angular 7 app.
I am trying to figure out if I can use prerender.io in a purely client-side manner, as I am not serving angular from a Node server, I am just hosting static files in a CDN. According to their docs, there is a middleware I can install that will detect when a web crawler makes a page request, and redirects the request to the pre-rendering server. However, all the examples I find involve modifying some backend node server. Can't I do this all client-side?
My questions are: does angular have the concept of a root-level app (I'm assuming it does), and if so, is it possible to install the prerender.io middleware such that it functions in a manner I described above?
It seems like there are a few tutorials for AngularJS, but things have changed quite a bit since then. Any help would be appreciated!
After taking a step back and understanding how this technology works, I am now realizing that a client-side solution doesn't make any sense for prerender.io. Hence, why I was so confused.
What prerendering is trying to solve is delivering static HTML to crawlers that simply cannot interpret a site rendered by Javascript. Therefore, what I was trying to do makes no sense (implementing the redirection / logic into Angular on the client), as it would require the web crawler to be javascript aware.
Instead I need to implement a user-agent check at my loadbalancer, which will direct traffic for prerendering. I'm going to set up an NGINX server that will point to my CDN for normal traffic, and a prerendering server if a crawler is detected.
Edit: And here is how to do it! https://medium.com/@damwhitaker/using-aws-ec2-nginx-and-prerender-io-as-a-proxy-for-a-single-page-app-2c3769689060