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?
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.