Switch from Google App Engine for SEO serverside/pre rendering

[ademidun]

• We currently prerender Atila because it is good for SEO and social media link previews

• We currently use headless Chrome, rendertron on App Engine but it is way too expesive(~$90/month).

• Fine when we had Google Cloud for Startup Credits and we didn't care about costs but now that it has expired we need to find an alternative.

See this issue: #8

and this commit for more info: 134c000

[ademidun]

Why not just use the rendertron's demo endpoint: https://render-tron.appspot.com/ as a temporary fix instead of using our own endpoint

A demo Rendertron service is available at https://render-tron.appspot.com/. It is not designed to be used as a production endpoint. You can use it, but there are no uptime guarantees.

source
Tutorial mentions that as well: https://angularfirebase.com/lessons/seo-angular-part-1-rendertron-meta-tags/

[ademidun]

• Another solution is to possibly modify rendertron's app.yaml:

  1. Which is "better" for our use case, standard or flexible environment? What's the similarities and differences between standard and flexible (note that page is not available for nodejs)
  2. Reduce min_instances to zero (if using flexible)
  3. Change from flex to standard environment
  4. Change instance class.
     • check the instance class prices:

• It seems like flexible is more customizable and is useful for more longer, cpu and memory intensive tasks

• For something "quick and easy" like prerendering web pages it seems like standard engine is a better option and we should probably go with opton 4:

• Change instance class:

[ademidun]

Okay so to summarize:

1. Use the quick and dirty fix of using the demo endpoint for now

2. When I go back home, I will get the original server code that was used to deploy to rendertron and push to Github and redeploy our own app engine server by doing the following:

3. Change from flex to standard environment

4. Change the instance class to the cheapest standard instance class

5. Monitor the effect it has on performance

[ademidun]

Trying to load the frontend resources through rendertron is causing a CORS error. I suspect that it might be because of the service workers?

Access to manifest at 'https://atila-7-staging.firebaseapp.com/manifest.json' from origin 'https://atila-7-staging.appspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To make things even more confusing, some resources are passing by CORS and others are not

• landing page gifs are passing by CORS

• Fonts .woff files and manifest.json are not passing CORS

• maybe it is an issue with my ngsw-config.json?

This tutorial suggests solving it by using something called foreign fetch: but that is now deprecated.

THe confusing part is that the main atila-7.appspot rendering engine seems to be working fine. It also fails on other resources but doesn't seem to request manifest.json which is why it doesn't fail

[ademidun]

I noticed the page still renders as long as manifest.json gets loaded after all the other files

[ademidun]

Steps to reproduce the bug:

1. Initial startup of app engine instance (occurs after sleeping or new version is deployed)

2. If the first url visited is not root, then manifest.json will be requested, it will fail because of CORS, then the rest of the app won't load.

[ademidun]

The now deprecated rendertron server can be found in this repo: https://github.com/ademidun/atila-angular-server-old