Using a content delivery network (CDN) for the application programming interface (API)

In the era of 5G, patience is no longer a virtue. We have everything at our fingertips and everyone wants to use their time as efficiently as possible. Just a delay of a couple of seconds and it affects your page views count and obviously it will impact your business that the web page represents.

Current studies say 40% of users will abandon a page that takes three or more seconds to load. It means if your website takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site and browse content on your site. So it is the need of the hour to serve a web page with lightning speed, So how can we achieve this when we will have a lot of data coming through APIs?

So before jumping in to solve the problem, let’s first understand the problem, 

In order to give the super-fast web page response which has a lot of data coming from APIs, first, understand what are those points will affect the speed of web pages that have the APIs dependency to show the content.

1. Server Distance That Serves data, For example, If a website’s servers are based in Mumbai, people in Pune will get the content faster than people in the US. The farther away the customers are from a web server, the slower the website.
2. Running Server-side complex queries(i.e., PHP, JAVA code, SQL queries) of Database and processing on the result and sending that data to the client-side. 
3. A web page can have more than one API which will fetch different data. Each time the page loads, APIs on a page call the server to get the content. The same data is fetched every time. If the traffic on the page increases then the load on the server increases. It may lead to a reduction in the site performance and increasing the latency of the page.

Using Content Delivery Network (CDN) for Application Programming Interface (API) is a modern solution for the above problems.

How will CDN for API's help to solve the above problems?

So to understand this you need to understand or have to be familiar with CDN. As a web developer, you must have come across the CDN concept when you wanted to use Bootstrap CSS or JQuery library in your project without downloading and serving those CSS/JS files from your site’s folder. Yes you are correct you have used the CDN for media by importing CDN links of the media. 

What CDN does? 

Wikipedia definition says:

A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and high performance by distributing the service spatially relative to end-users. 

In the first sentence of definition, you can see that our first problem is already solved, Making your data available at the user's closest server which will be the proxy of the origin server. CDN makes copies of data on edge locations so that when a user requests for the page that needs data it will serve the data from the closest center of the user.  

The second sentence of the definition says making high availability and high performance by distributing the service spatially relative to end-user. It means CDN makes a distributed network of proxy servers hence if any of the nodes get crashed because of high traffic, it internally transfers the request to the closest node so that there will not be a case when data is not available to serve.

Now the question is;

How to make those data available and stored on the CDN?

Amazon CloudFront is a fast content delivery network service that securely delivers data to customers globally with low latency. CloudFront delivers content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately. If the content is not in that edge location, CloudFront retrieves it from an origin.

How You Configure CloudFront to Deliver Your Content?

To set up CloudFront distribution, Amazon has provided beautiful documentation that you can refer to here. 

While creating distribution it will have default cache behavior which will be applicable for all the paths. 

Sometime conditions may arise you will have an API that will need different cache behavior than the default. Then one can set different cache behavior for that specific API path by creating different cache behavior from here:

Now let’s see how to configure CDN for specific APIs:

        1. Create new Cache Behavior

        2. Select API methods 

        3. If you want to cache data based on ‘Request Headers’ you can configure it like shown below

            One can add a maximum 10 ‘Query String Whitelist’. 

       4. Similarly for different API parameters will have different data. So you can whitelist them as shown in the image below:  

       5. Create behavior and wait until distribution status changes to ‘Deployed’ from ‘In progress’.

After distribution status changes to ‘Deployed,’ you will be able to see the API data loading from the cache when you hit the web page where that API is called.

Also, you will find the statistics of cache data here in the ‘Popular Objects’: