HTTP service optimization through client-side caching

Making lots of API requests in a modern web application is normal, but being more careful about limiting when, and if, we make additional requests can make a big difference in the performance of our application. Caching is a common solution that can be employed to prevent making requests for content we already have loaded in our application.

Getting Ready

Let's provide a caching strategy for our BlogPosts service. We'll build a cache of blog post results when we load them for the first time. After that, if we request the same data, it will simply load from a cache instead of making another HTTP request for the same data.

Before getting started, we will need to make a new class for our cached blog post pages. We'll create a new model for our pages called PostPage, using Angular-CLI generate:

ng generate class posts/post-page

How to do it...

Let's follow the steps below to add client-side caching to our blog post service:

1. First, we'll set up our...