<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#type-of-assets">Types of Assets</a></li>
<li><a href="#use-cases">Use Cases</a>
<ul>
<li><a href="#peformance">Performance</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#personalization">Personalization</a></li>
</ul>
</li>
<li><a href="#technologies">Technologies</a></li>
<li><a href="#edge-compute-and-stores">Edge compute (and stores)</a></li>
<li><a href="#future-implications">Future Implications</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>Content Delivery Networks (CDNs) are technologies that helps to efficiently distribute and deliver data around the world.</p>
<p>Many popular website and applications (<strong>ie Netflix, Spotify, Reddit, Twitter etc</strong> 🤠) are most likely using a CDN.</p>
<p>Maybe you’ve developed an application that is content rich like a blog or a news site for a global audience — then there is a high likelihood that the site is using a CDN!</p>
<p><strong>So, how does a CDN work ? 🤔</strong></p>
<p>Before we talk about that, let’s first understand how a request works without a CDN.</p>
<p>In an infrastructure without a CDN, the request needs to go through multiple network hops to get to the server (ie data center) and then back to the client (the user).</p>
<p><strong>Depending on the distance (between the client and the server), this can have drastic impact on the performance.</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-direct-access-to-origin.png" alt="Directly accessing the data center from a different geographic location" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of directly accessing the data center from a different geographic location</i></blockquote>
  </div>
</div>
<p>So, what is the limiting factor here ?</p>
<p><strong>It’s the physical distance between the server and the client</strong></p>
<p>This is because speed of light can travel only <strong>299, 792, 458 meters per second (m/s)</strong>.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-speed-of-light.png" alt="Speed of light" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration: the speed of light</i></blockquote>
  </div>
</div>
<p>That means we are limited in how fast the data can be transferred.</p>
<p>The only other option is to reduce the physical distance between the client and server — That’s exactly what you can achieve when you use a CDN.</p>
<p>By introducing a CDN, we can strategically place servers that sit closer to the user, and these servers are referred to as “edge locations”.</p>
<p>This allows us to minimize the physical distance between the data centers (ie servers) and the users (ie clients).</p>
<p>What you end up with is a network infrastructure that is optimized for global data distribution, and delivery!</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-access-to-edge-locations.png" alt="accessing the data through the edge locations" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of accessing the data through the edge locations</i></blockquote>
  </div>
</div>
<p><strong>In the subsequent sections we’ll go through the following:</strong></p>
<ul>
<li>How it works</li>
<li>The type of assets</li>
<li>Use cases</li>
<li>Technologies</li>
<li>Edge compute (and stores)</li>
<li>Future implications</li>
</ul>
<p>It may seem like the data magically appears at these edge locations but that is not the case.</p>
<p>There is a process that happens in order to make this possible, let’s go through that in more detail.</p>
<h2 id="how-it-works"><a href="#how-it-works" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How it works</h2>
<p>So, when you first introduce a CDN into your infrastructure, here is what happens.</p>
<p>The initial request is no different than any other request, it will still reach out to the origin server to retrieve the assets (ie html, js, images).</p>
<p>After the retrieval, these assets from the initial request can now be cached at these edge locations (if the CDN is configured to do so).</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-first-request.png" alt="First request to the origin server" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of the first request to the origin server</i></blockquote>
  </div>
</div>
<p>It is through this process that these assets become available at these edge locations.</p>
<p>Then, in the subsequent request, here is where the magic happens.</p>
<p>It can now reach out to the edge location first to retrieve the asset (cached version) before going to the origin server.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-subsequent-request.png" alt="Subsequent request to the origin server" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of the subsequent request to the origin server</i></blockquote>
  </div>
</div>
<p>Then when the cache expires, meaning the content is now stale, it will go through this whole process again.</p>
<h2 id="type-of-assets"><a href="#type-of-assets" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Type of assets</h2>
<p>Any type of assets that is served through the origin server can be accelerated and delivered through the CDN.</p>
<p><strong>The assets include:</strong></p>
<ul>
<li>HTML pages</li>
<li>JS files</li>
<li>CSS files</li>
<li>Images</li>
<li>Videos</li>
<li>Files (PDF, Documents etc)</li>
<li>and other assets</li>
</ul>
<h2 id="use-cases"><a href="#use-cases" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use cases</h2>
<p>So, when would you leverage a CDN ?</p>
<p>As we already discussed, the typical application for CDNs are for content acceleration and delivery of static content to the global audience around the world.</p>
<p>However, CDNs are not just limited to this application.</p>
<p>There are many interesting ways you customize your infrastructure through the use of a CDN.</p>
<p>Let’s go through each of them.</p>
<p><strong>Here are some areas that CDNs can be applied to:</strong></p>
<ul>
<li>
<p><strong>Performance</strong></p>
</li>
<li>
<p><strong>Security</strong></p>
</li>
<li>
<p><strong>Personalization</strong></p>
</li>
</ul>
<h3 id="performance"><a href="#performance" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Performance</h3>
<p>By leveraging these edge locations, the content delivery can be accelerated for the global audience.</p>
<p>The content is moved from the origin servers to these edge locations which results in a reduction in the response times (latency).</p>
<p>From an end user perspective, this means a better user experience (UX) while browsing the application.</p>
<h3 id="security"><a href="#security" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Security</h3>
<p>Using a CDN is not going to automatically improve security but it does provide capabilities that you can leverage to harden security.</p>
<p>Most of the time, the operators are responsible for adding the security features but some CDN services do provide out-of-the-box security capabilities (CAPTCHA, DDoS etc) that you can opt into (ie Cloudflare, Fastly, Akamai).</p>
<p>When you have a CDN, it acts like a gateway, the request will go through the CDN before it reaches the origin server. Which means, it can be used to manage of control the incoming and outgoing traffic.</p>
<p><strong>Some of the applications may include:</strong></p>
<ul>
<li>Access management and control</li>
<li>DDoS prevention</li>
<li>Bot detection</li>
<li>TLS management</li>
<li>Managing security headers</li>
<li>and much more...</li>
</ul>
<h3 id="personalization"><a href="#personalization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Personalization</h3>
<p>Another use case for using a CDN is the ability to personalize the content delivery based on the location.</p>
<p><strong>Here are some examples:</strong></p>
<ul>
<li>
<p>Providing an unique offering to a particular region (<strong>By Region</strong>)</p>
</li>
<li>
<p>A/B Testing or Feature Roll out by region (<strong>By Region</strong>)</p>
</li>
<li>
<p>Optimizing content and experience for a particular device (<strong>By a viewer device</strong>)</p>
</li>
<li>
<p>Alter content based on a particular region (<strong>By region</strong>)</p>
</li>
<li>
<p>and the list goes on...</p>
</li>
</ul>
<p><strong>Can’t you already do this through the server ?</strong></p>
<p>Yes, but when personalizing at the edge there are additional benefits like:</p>
<ol>
<li>
<p><strong>Performance</strong> - Faster content delivery</p>
</li>
<li>
<p><strong>Dynamic content</strong> - Leveraging compute at the edge, you can customize the response anyway you like (ie stitch content together from the edge cache and the origin)</p>
</li>
</ol>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-edge-personalization.png" alt="personalizing request at the edge" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of personalizing request at the edge using edge functions</i></blockquote>
  </div>
</div>
<h2 id="technologies"><a href="#technologies" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Technologies</h2>
<p>What are some of the available options if I want to include a CDN ? There are many options.</p>
<p>Here are some common managed services that provide CDNs as an offering:</p>
<ul>
<li>Akamai Technologies</li>
<li>Amazon Cloudfront</li>
<li>Cloudflare CDNs</li>
<li>Google Cloud CDN</li>
<li>Azure CDN</li>
<li>Fastly</li>
<li>The list goes on...</li>
</ul>
<p>There are many cloud vendors that provide this as a managed service (which is great)!</p>
<p>The capabilities of these services are quite similar but some vendors are doing some interesting innovation at the edge (ie Cloudflare with KV, R2).</p>
<p>If you are just using CDNs as a global cache, then any of these services should work! If you want more capabilities, then I recommend checking out Cloudflare.</p>
<h2 id="edge-compute-and-stores"><a href="#edge-compute-and-stores" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Edge compute (and stores)</h2>
<p>Sometimes the out of the box capabilities provided by these managed CDNs are not enough, and you need something more customized, what do you do then ?</p>
<p>Well, most of the managed CDNs provide the capabilities to have compute at the edge, also known as edge functions (or workers).</p>
<p>They allow you to extend the functionality of your edge servers so you can run business logic closer to the users.</p>
<p>Now if you combine this with an edge storage system like <strong>Akamai’s EdgeKV</strong> or <strong>Cloudflare’s KV or R2</strong>, you can start to do a lot of interesting things.</p>
<p>This means you can build some powerful applications that run closer to the users!</p>
<h2 id="future-implications"><a href="#future-implications" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Future Implications</h2>
<p>Most of the applications of edge computing are from CDNs through accelerating and distributing content globally.</p>
<p>However, I think there is a bigger trend here.</p>
<p>Directionally, what we are seeing is computing moving from a centralized model to distributed model.</p>
<p>Or said in a different way, more and more compute will take a hybrid approach between localized (edge compute) and global compute (centralized cloud).</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-localized-compute.png" alt="Illustration of localized compute" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of localized compute</i></blockquote>
  </div>
</div>
<p>As I mentioned in the this article, the main benefit of edge computing is the <strong>efficiency and performance</strong>.</p>
<p>Due to the geographic promixity of these compute servers, they are great for any sort of applications that require fast response times or real-time, near real-time capabilities.</p>
<p>That may make it great for compute on car or machine sensors, watches, or any other smart devices. This is just an example.</p>
<p>The localized compute can respond to computing needs at a more local level with efficiency, and it can also periodically check in with the global compute for any other relevant information.</p>
<p>These advantages become even more evident for applications in remote locations where connectivity is very limited or non-existent.</p>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>Before we part, let’s do a quick recap!</p>
<p><strong>Takeways:</strong></p>
<ul>
<li>
<p><strong>CDN is a technology that improves performance of the content delivery by moving servers closer to the user</strong></p>
</li>
<li>
<p><strong>The keys benefits of CDNs is the performance you get in the content delivery &#x26; distribution</strong> (Reducing the latency of the requests)</p>
</li>
<li>
<p><strong>Beyond performance, other applications of CDNs include security and personalization</strong></p>
</li>
<li>
<p><strong>Type of assets include:</strong></p>
<ul>
<li>HTML</li>
<li>JS</li>
<li>CSS</li>
<li>Images</li>
<li>Videos</li>
<li>Documents</li>
</ul>
</li>
<li>
<p><strong>Edge compute (or edge functions) allow you to run business logic at these edge locations</strong></p>
</li>
<li>
<p><strong>Future compute may be divided into global and localized compute</strong> (Prediction)</p>
<ul>
<li>
<p>Localized for performance and efficiency (Real time)</p>
</li>
<li>
<p>Global for centralization and syncing data or information</p>
</li>
</ul>
</li>
</ul>
<p>That’s it!</p>
<p>If you found this helpful or learned something new, please share this article with a friend or co-worker 🙏❤️ (Thanks!)</p>


Jerry Chang

Go Back

Edge Computing: An introduction to Content Delivery Networks

Enjoy the content ?