---

See my previous post on Server-side Rendering with .NET Core.

In a previous post on Server-side Rendering with .NET Core and Puppeteer Sharp, I glossed over the hosting and redirection in the last few paragraphs and acted like it was no big deal. I talked about using Cloudfront to route users to pre-rendered HTML content hosted on S3 and hoped that somehow that would magically work without actually executing it. When it came down to making it happen, a simpler solution presented itself.

The breakthrough came in thinking about how the browser would interpret AngularJS routes when JavaScript was unavailable, as is the case when search engine robots index my site, and the whole point of pre-rendering it. By default, the browser would look for actual pages at the location specified in the Angular route, so the route '/blog/number-one' would be expected to be an HTML file (with an HTML file extension).

I needed to use this browser behavior to my advantage to serve up the pre-rendered content instead of relying on Cloudfront or another intermediary to do it for me.

To do this, I simply added code to my pre-rendering solution to upload the pre-rendered HTML files to the actual location specified by the route in the site map URL. I left off the HTML file extension and set the content type of the S3 file to 'text/HTML'. So, '/blog/number-one' became an actual HTML file for search bots and clients without Javascript. The partial HTML file for AngularJS clients that rendered the live 'number-one' content remained in its own subfolder distinct from the pre-rendered HTML.

Nested routes became sub folders, and I populated the root folder in S3 with pre-rendered views of my main site pages and routes. This was much easier than working voodoo with Cloudfront routing rules or creating some other hack to do what I thought should be simple.

I know later versions of Angular offer native solutions to the bot indexing problem, but I’m trying to avoid having to upgrade and rework my UI when AngularJS offers most of what I need to create a beautiful website. I want to focus on creating content and not get lost in the endless code upgrade cycle that doesn’t add value to what I want to do here.

This was an exercise in practicality despite the turns that it took. I know more than I did before, and it took less time than reworking my UI framework. I won’t run AngularJS forever, but I’m happy I kept things focused and obeyed Pareto’s Law in solving this problem.