Welcome to Angular Universal PWA starter Star

TransferState

Choose one of the buttons below and start refreshing the page.

Number of hits to the external API:

Refresh page (perform request)

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:

  1. Request page; i.e.: https://www.angular-universal-pwa.maciejtreder.com/transferState/without
  2. Request reaches back-end:
    1. Back-end launches Angular and starts rendering the view
    2. Back-end performs the request to the API to fetch data for component (https://2tvdln9i91.execute-api.eu-central-1.amazonaws.com/production/hit)
  3. HTML is sent back to the user
  4. The browser renders the view from the given HTML and CSS
    1. The browser launches JavaScript -> Angular comes into the game
    2. 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.