GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
A primer on strategically caching dynamic content at the edge: How it works and why it’s better than traditional CDNs.
When it comes to performance most CDNs do a few things well, they deliver static files quickly, provide network overhead for peak traffic times and protect against network-level DDoS attacks. Historically that meant a tangible increase in performance and security for assets like images, videos, and other static content. As web technologies have evolved the aforementioned benefits are essentially just the table stakes that were established when CDNs became part of mainstream web delivery solutions.
The problem is CDN architecture was developed years ago. Website architecture has changed by leaps and bounds but most CDNs have not adapted to the changing landscape.
If you are reading this, you have a site that is likely architected with some amount of server-side rendered dynamic content. If you’re using a legacy CDN, you’re probably used to seeing something like this in your response headers when you pull up your browser’s developer tools.
cdn-cache: pass
Substitute the value for this pair depending on your provider: pass, miss, or dynamic-content. It all means the same thing.
“This response comes from your origin because it was too complicated.”
And what does that mean for your site’s performance? It means you’ll sacrifice speed because your dynamic content is almost always coming from your origin plain and simple. Your category and product pages, articles, and API requests are sent straight through to your origin almost 100% of the time. Most CDNs suffer from the same blight. If you’re lucky you can squeeze around 10 to 11 percent of your server’s dynamic responses into your edge cache. You’ll quickly find that you don’t have granular enough control to fine-tune your caching rules to create a website that loads instantly and feels like a native app.
Welcome to Edgio
At Edgio we boast the second-largest CDN on the planet with 300+ globally dispersed PoPs and 250 Tbs of capacity. We’re secure, performant, and everywhere on the globe. But as we said before, those are just the table stakes. At Edgio, we’re approaching the CDN problem from a different perspective. Instead of being tied to twenty-year-old rules, we’ve built a responsive and flexible CDN for the next twenty years and beyond. We’ve developed the world’s first code configurable CDN that gives your developers and DevOps team members the flexibility and granular control they’ll need to deliver websites in less than a second.
It’s not magic, it’s the future of CDNs and it’s available now
At this point, you’re probably thinking this sounds like magic, well it might feel that way but it’s not, it’s the future of web application delivery. Instead of separating your DevOps and Engineering teams, we’re bringing them together by allowing you to incorporate your CDN logic into your local, staging, and production environments.
Easily cache whatever you want, for how long want
Every Edgio configuration starts with a code repository that you own and control. Every deployment is unique and atomic, meaning you can roll back to any version in less than a minute. You’re free to deploy the configuration alongside your project or maintain it in a separate workflow. Most of our customers end up incorporating their CDN rules into their CI/CD pipeline and their normal development flow. The result is increased developer velocity without sacrificing performance and control. Manage your CDN like you do your code base.
I’m used to publishing my configuration changes in a portal or by making API requests. How is Edgio different?
Don’t worry, we have API endpoints and a traditional user interface available when you want it but to fully maximize your cache hit rate, site performance, and developer velocity, you’ll want to start using EdgeJS. Let’s dive in.
When a project is initialized you’ll start with a simple configuration file that includes a recommended ruleset. Your configuration is written in JavaScript, the most popular development language on the planet, and deployed in seconds with our CLI. One file defines your origin servers.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
Add your API endpoints, media buckets, or any other origin you need. Easily and with a few lines of code.
What about that caching flexibility?
Great question, this is where the fun starts. We add another file so you can configure your routes and write some caching rules. Create rules for your content and set your edge, browser, and service worker caching rules as you see fit.
Let’s start with those static assets CDNs handle so well.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
With one rule we’ve established something like this for any request:
“If we see a request with a matching file extension, cache it on Edgio and the client’s browser for twenty-four hours.”
If you are trying this at home you can click around your site locally and watch as we cache and deliver images, your images, fonts, CSS, and JS. Fire up an incognito window so you’re certain your browser cache is empty and view your cache hits locally. Yes locally. No need to deploy this to see it work. You know exactly how your code will interact with our CDN.
What about that dynamic content you mentioned?
Oh, don’t worry we didn’t forget. We’re only 10 minutes in and we’re matching those legacy CDNs. Now we’re going to turn on the afterburners and leave them in the dust. Let’s suppose you want to add a route for some dynamic content.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
And translated this means the following:
“Cache all product pages for a day.
When that cache is expired, serve the old one for an hour while we look for a new version”
Now you’ve seen the flexibility and understand the basics. Hopefully, you’re imagining what kind of impact deploying your CDN on Edgio can have on the speed and performance of your site. You can easily define your own routes and assign caching rules to them. But what else can you do with Edgio’s Applications platform and EdgeJS?
- Forward requests to a different path on your origin,
- Alter requests
- Alter responses
- Manipulate cookies
- Serve static files
- Route to serverless functions
- Fall back to server-side rendering
- Redirects
- Traffic blocking
- Selective purging with custom cache keys
- Or transform your origin’s response entirely.
It’s up to you to decide how you’ll leverage Edgio’s next-generation technology and the above examples are just the tip of the iceberg. In fact, at Edgio we’re in constant pursuit of performance so we decided to take it one step further, beyond the edge and into your visitor’s browser with our unique HTML and asset prefetching solution.
To find out how you can virtually eliminate network response times and completely transform your website by giving it the feel of a native application, be sure to check out our follow-up article: Reduce Bounce Rates and Improve Site Experience with Predictive Prefetching by Edgio.
