The Lowdown on CDN Dynamic Content

By Brian Jackson

Published on August 4, 2016

Typically when hear or read about a content delivery network, they are always talking about how your static assets (such as JavaScript, CSS, images) are being delivered from the CDN edge server's cache. This is definitely a typical use case for a CDN. A common misconception though is that CDNs can't handle caching dynamic content, which is not always the case. The term "dynamic" though might be a little different than what you think. Read more below about how CDN dynamic content works and how KeyCDN can help speed it up.

Static content vs dynamic content

First off, it is important to note that we are not talking solely about static websites vs dynamic websites, even though they are very similar, but rather the content that is on the page itself. Because there are ways to include dynamic content on a static website. Below are some common properties of static content and dynamic content.

Static content

Static content is just what it sounds like, it is content that doesn't change. Because of this, static content usually loads faster and has a smaller page size. It is content that doesn't require any code to execute or make database queries. Also, it is fully cacheable. A good example of this is on Laravel's website, which is just a straight HTML webpage with images, CSS, and JS linked to as static assets. There is no PHP or database queries being performed. It is made up of all static content.

Their webpage loads in under 400 ms. Static content is fast!

Here are some common static file types:

Images: .png, .jpg, .svg, .gif, .tif
Style sheets: .css
JavaScript: .js
Video and audio: .flv (Flash), .mp4 (HTML5 videos), .mov (QuickTime), .wmv (Windows Media), .mp3, and .wav
Web fonts: .eot, .ttf, .otf, .cff, .afm, .lwfn, .ffil, .fon, .pfm, .pfb, .woff, .svg, .std, .pro, and .xsf
Other formats: .pdf, .doc, .docx, .ppt, .pptx, .xls, .xlsx, .epub, .odt, .odp, .ods, .txt, .rtf, and .zip

Also, it is important to note that some popular CDN providers don't cache files like mp3, mp4, zip, or rars, but KeyCDN does!

Dynamic content

Dynamic content is content that is generated for you on the fly when you browse a webpage. WordPress is a good example of a CMS platform that has dynamic content. Dynamic content can be a lot more resource intensive because it can execute code and usually requires database queries to generate the content.

For example, when you visit a WordPress site, pretty much the entire page's content is generated based on PHP and database queries. Below is an example of the stock index.php homepage page bundled with the WordPress twenty fifteen theme. It is originally 61 lines of code. But when someone visits it, it turns into 224 lines of code because of all queries and content being generated.

Caching CDN dynamic content

Dynamic content typically means that it is always changing and never the same. This could be anything from news articles which are being updated every few minutes, to stock prices, or even basketball scores and tickers on websites. This usually means that it can't be cached. However, thanks to KeyCDN's feature set, there are a couple options you have to cache things that are still frequently changing.

Option 1 - Programmatically purge with KeyCDN API

In the past, when it came to caching dynamic content on a CDN, some providers would just set the TTL lower. This means the visitor might not always see the latest version, but would at least see a close one. Thanks to KeyCDN's instant purge technology you don't have to worry about this. You can utilize KeyCDN's API in your projects to purge the CDN cache when there should be triggers so that people see the latest dynamic content. A trigger is typically an action that occurs when a user or your webserver generates new content.

Option 2 - `Cache-Control` headers

When using a CDN, here is an example of what happens when a visitor comes to your website.

Visitor hits website and requests a file from the CDN.
CDN checks to see if it's in cache.
If the content hasn't expired it is then served directly from the edge server to the client (HIT).
If the content is not in the cache or expired, the edge server makes a request to the origin server to retrieve it (MISS).

With KeyCDN, you have the ability to modify the Cache-Control headers. Cache-Control is an HTTP cache header comprised of a set of directives that allow you define when and how a response should be cached and for how long. The Expire setting adds or modifies the Expires and Cache-Control response header fields that are sent to the client if the response code equals 200, 201, 204, 206, 301, 302, 303, 304, or 307. The Expire value has only an impact on the web browser cache and not the edge server cache. You can find this setting in the Zone settings.

The following cases apply to this parameter if it has these values:

-1 Cache-Control: no-cache
0 Push Zone: disabled / Pull Zone: as received from the origin (header honoring)
>0 Cache-Control: max-age=_t_, where t is the time specified in the directive in minutes converted to seconds

Example can be seen below with the Expire directive set to 1440 (value in minutes which equals to 1 day):

curl -I https://example-hexid.kxcdn.com/img/logo.png
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 02 Nov 2016 04:48:02 GMT
Content-Type: image/png
Content-Length: 6396
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sat, 26 Apr 2016 12:11:29 GMT
ETag: "535ba271-18fc"
Alternate-Protocol: 443:npn-spdy/3,443:npn-spdy/2
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
**Expires: Sun, 09 Nov 2016 04:48:02 GMT**
**Cache-Control: max-age=86400**
Link: <https://www.keycdn.com/img/logo.png> rel="canonical"
X-Cache: MISS
X-Edge-Location: nlam
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

The max-age value reflects the Expires directive in seconds (86400 sec = 1440 min).

Summary

So as you can see, there are ways to cache what some call dynamic content. By utilizing KeyCDN's instant purge technology and API, you can setup triggers to purge cache when needed based on user or server actions. Also, using Cache-Control headers give you more flexibility when it comes to the client's web browser cache. This allows you to still take full advantage CDN caching and ensure your visitors are seeing up to date information.