Choose one of the buttons below and start refreshing the page.
Number of hits to the external API: 14393
To see factual number of requests, you need to get rid of PWA functionality. To do that hard refresh this page (ctrl + shift + f5) or unregister Service Worker in developer tools.
Note: if multiple users uses this page in the same time, hitCount may be increasing by more then 1 or 2.
Code example can be found here: TransferState example in Angular Universal
Most of the server-side rendered sites have one big problem. APIs are requested twice during initial load. Why? This is how user action flow looks like:
- Request page; i.e.: https://www.angular-universal-pwa.maciejtreder.com/transferState/without
- Request reaches back-end:
- Back-end launches Angular and starts rendering the view
- Back-end performs the request to the API to fetch data for component (https://2tvdln9i91.execute-api.eu-central-1.amazonaws.com/production/hit)
- HTML is sent back to the user
- The browser renders the view from the given HTML and CSS
- The browser performs the request to the API to fetch data for component (https://2tvdln9i91.execute-api.eu-central-1.amazonaws.com/production/hit)
To avoid such repetitive requests, Angular 5 comes with TransferState. This mechanism gives front-end and back-end a possibility to "communicate". In other words, front-end retrieves from the back-end collection of key -> value sets with the data which back-end already retrieved from external services.