Will Angular Universal/Prerendering Load Content That Is Dynamically Loaded?

Question

I have an angular web app that loads data (products) from Firebase Firestore in the constructor of components. Then it displays the list of products on the page. While the data is dynamic, it does not change very often. For example, the price may change but the products themselves stay there.

I would like to implement Angular Universal and Prerendering but I want to confirm that the list of products loaded in the constructor would be included in the prerendered static pages.

Is that true?

Also, is it possible to write a function to "re-prerender" maybe nightly or when the DB is updated?

Answer 1

Static pre-rendering is possible with Angular Universal as well. Any requests will then be made during the build time.

The quickest ways to try this out is to use the schematic via the command:

ng add @ng-toolkit/universal

Take a look at the created prerender.ts and the changes in your scripts within the package.json .

In the file static.paths.ts you can define the routes that should be pre-rendered:

export const ROUTES = [
  '/commits/yanxch'
];

When you then run npm run build:prerender you should see a new static folder within the dist folder.

Basically the response state of the requests during build time is put into the index.html file under <script id="serverApp-state">..</script>

This solution uses the so called ServerTransferStateModule and the TransferHttpCacheModule on the browser side to avoid that requests are made twice (on the server during build and when the client side application is started).

You can trigger this during a nightly build and then deploy the newly built application but that procedure depends more on the needs and the setup of your build pipeline. So yes, a build script that does a DB-Query and then executes a new prerender build is possible as well.

You can also take look at my example .

Answer 2

Angular Universal would allow you to load the content (in your case, product list) in the page before the page is served. However, it does not output static pages ahead of time, and usually you'll find yourself conditionally running certain code server-side and certain code client-side (using isPlatformServer and isPlatformBrowser). Also worth noting that you will need to disable, clean, or substitute DOM references and other browser dependent code for it to run on the server (Using Angular references, such as ViewChildren, will behave properly in Universal/server-side).

As for regular prerendering, Universal is designed to deliver the application/page on demand, and does not output pages ahead of time. If you're looking to reduce load, I'd recommend a combination of URL params and caching (such as with a CDN).

Once you've got it set up, and embrace that the code needs to support a browser-less environment, Angular Universal is really neat and allows you to do some unique things. I consider it more of a server-render, client-render hybrid. However, it isn't a "plug and play" solution to prerendering a page.