--- title: Improve Angular Performance by Caching API Calls description: Why you should be using TransferState & Scully to cache API calls in Angular applications to improve performance. image: https://www.bitovi.com/hubfs/EYo0m4GUMAIdZwP.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | May 22, 2020 # 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](https://www.bitovi.com/hubfs/People/jennifer-w.jpg) Jennifer Wadella Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) When considering how to improve [Angular](https://www.bitovi.com/why-build-with-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](https://dev.to/bitovi/why-you-should-be-using-transferstate-to-cache-your-api-calls-in-angular-3nn7)**. [![Tag for performance](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) performance ](https://www.bitovi.com/blog/topic/performance) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/meetup-1.png?height=117&name=meetup-1.png) [ Bitovian Talking about Angular Performance at Upcoming Event ](https://www.bitovi.com/blog/bitovian-talking-about-angular-performance-at-upcoming-event)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/rsz_cbn-m2yveaax30n.jpg?height=117&name=rsz_cbn-m2yveaax30n.jpg) [ Helpful Tips for Debugging Scully & Angular ](https://www.bitovi.com/blog/helpful-tips-for-debugging-scully-angular) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/improve-angular-performance-by-caching-api-calls", "@type" : "WebPage", "description" : "Why you should be using TransferState & Scully to cache API calls in Angular applications to improve performance." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Jennifer Wadella" }, "dateModified" : "January 28, 2022, 6:12:28 PM", "datePublished" : "2020-05-22 17:27:32", "description" : "Why you should be using TransferState & Scully to cache API calls in Angular applications to improve performance.", "headline" : "Improve Angular Performance by Caching API Calls", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/EYo0m4GUMAIdZwP.jpg" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```