How to upload pre-rendered file on S3 and access that on initial load of our webpage?

Question

I have my web application implemented using Angular Universal Starter kit. I want to upload the pre-rendered file to the S3 bucket so that my initial page gets loaded faster.But I couldn't find the proper configurations regarding uploading the pre-rendered file to S3 and how to access that file on initial load?

Answer 1

Using a prerendered HTML is the same as uploading a static website. Assuming that you have aws cli installed and configured (using aws configure), you can run the following command on the directory to upload the file to a s3 bucket.

This will only upload/update those files which have changed from the existing bucket files.

aws s3 sync my_local_dir s3://my_s3_bucket_name

Additionally, if you want to set cache then you can add the following option

aws s3 sync my_local_dir s3://my_s3_bucket_name --cache-control max-age=604800

Answer 2

Angular Universal can be leveraged for both Dynamic SSR (server-side rendering) and Static Pre-rendering

Dynamic SSR (server-side rendering) cannot be achieved with static file hosting like AWS S3. It needs a server side Javascript engine (nodejs) to pre-render the page before handing it over to the client bowser; Amazon S3 simply doesn't have any capability than serving some static files.

On the other hand, for Static Pre-rendering with angular universal, AWS S3 can be leveraged as it's all static html/js/css files. There is a catch though, every time the static file content changes, you have to kickoff your build/CI-CD process so that the resultant static files will get deployed to S3 bucket. If that's ok for you, this is no different than deploying any other static sites to S3.

For example,

aws s3 sync ./dist/<your_awesome_ng_project> s3://<your_awesome_bucket_name>/ --delete.

You can refer this circle CI config where I am building an angular project and deploying to S3 bucket https://github.com/jaisonpjohn/dbeaver-password-retriever-ng/blob/master/.circleci/config.yml

More on Dynamic SSR (server-side rendering) & Static Pre-rendering

Please refer this article to know a bit more about it. I am quoting relevant parts here

Dynamic SSR (server-side rendering) & Static Pre-rendering

Dynamic SSR is the concept that there will be a live Node server spun up that whenever a Route is hit, it will dynamically generate and serialize the application — returning that String to the browser.

Static Pre-rendering is when we want to pre-render a list of routes, and create static files, (ie: index.html, about-us.html, etc) and then use a server of our choosing to serve up those files later on.

So how do we know which one to choose and when?

Pre-rendering will typically give you better performance since we’re not waiting for a server to hit all the necessary APIs within your application, and nothing has to be “serialized”, it already has all the serialized HTML of your application outputted for each one of the Routes files.

Here’s the points you need to consider before deciding which route you need to take.

When to use Static Pre-Rendering:

• Your application itself is rather Static. (or at least the Routes you’re trying to pre-render) For example: homepage | about us | contact us

• Very dynamic portions of your site (and ones that are behind a Login/Auth barrier) can be pointed to the normal Client-side rendered (CSR) version of your application, and Angular can bootstrap itself normally.

• Your application doesn’t update very often. Whenever some changes are needed on the static routes, you can simply run the build script again and republish the /dist folder containing all of your pre-rendered files.

When to use Dynamic SSR:

• Your application (and the routes you need to SSR) are very dynamic
• You have a list of “trending products” | “live data” | etc, that you need populated correctly for every server-side render.
• Your applications structure is rendered based on JSON files or a CMS where anything could change at any given moment.

Typically most applications will need static pre-rendering (since any routes behind an authentication-wall don’t gain much/any benefit from utilizing SSR, since one of the main purposes is the SEO gains, and improved perceived performance. Remember, you can always have certain aspects of your application not render during SSR, and have those dynamic portions populated during CSR!

A similar question (this question is about another static file server nginx, instead of S3): https://github.com/angular/universal/issues/554

BTW, Angular Universal is part of the main ng project now

This answer is a bit late, I don't know whether you got your answer yet or not. But I am adding it here anyway to help fellow SO users.

Opening a bounty here.