<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Front-end development

Angular |

Improve Angular Performance by Caching API Calls

Why you should be using TransferState & Scully to cache API calls in Angular applications to improve performance.

Jennifer Wadella

Jennifer Wadella

Twitter Reddit

When considering how to improve Angular performance, there are many things we can borrow from the JAMstack approach. One of these, caching API calls, can be a real performance booster AND save money by limiting server requests to fetch redundant information.

A great example of where caching API calls can have a large ROI is on e-commerce sites. E-commerce sites with APIs to list their products will benefit greatly from caching lists of those products, statically serving them from a CDN, and re-deploying application files when new items are added. Users will be able to see products without having to wait for an HTTP  request, which can massively improve performance, especially on mobile and slow 3G connections.

Caching an API call means making the HTTP request when we statically generate our application pages, and storing the results of that request somewhere, like in a json file, to be served from a CDN. This prevents the user from having to make the HTTP request to where ever the server it lives on is and wait for the response every time they view a page of our app!

There are added security benefits to this caching approach as well - a company's API won't have to be exposed in the browser at all to serve product data to the user. 

Scully, Angular's JAMstack tool, makes caching fairly simple - read more about how we use this approach on dev.to.