Caching Strategy - CDN-APACHE - Example Headers

Caching Strategy - CDN/APACHE - Internal working & Example Headers

Imagine a company is hosting a website on a server in any cloud provider like AWS, AZUR, GCP . It may take around 100ms to load for users in US, but it takes 3–5 seconds to load for users in Finland. Fortunately, there are strategies to minimize this request latency for far-away users.

These are called Caching and Content Delivery Networks (CDNs), which are two important concepts in modern web development and systems design.

CDN are of different-different type  based on cloud service provider below are few most used ones –

• Cloud Front , by AWS
• Azure Front Door
• Content delivery solution from Akamai

Different Caching Strategies

Caching data can greatly improve the performance of applications. There are typically 4 common places where we can store cached data.

Browser Caching

Browser caching involves storing website resources on a user’s local computer. When a user revisits a site, the browser can load the site from the local cache rather than fetching everything from the server again.

Disabling Cache in Browser: 

Users can disable caching by adjusting browser settings. In most browsers, developers can disable cache from their developer tools, usually found in the network settings. For instance, you can use the “Disable cache” option in Chrome's Developer Tools > Network tab.

Storage Location: 

The cache is stored in a directory on the client’s hard drive, managed by the browser. Browser caches store HTML, CSS, and JS bundle files on the user’s local machine, typically in a dedicated cache directory managed by the browser.

Cache-Control Header: 

The Cache-Control: max-age=3600 directive tells the browser to cache the file for 3600 seconds (1 hour).

Content Delivery Networks (CDNs)

CDNs are a network of servers distributed geographically, generally used to serve static content such as JavaScript, HTML, CSS, images, and video assets. They cache the content from the original server and deliver it to users from the nearest CDN server.

How CDN Works ?

The process of Content Delivery Networks (CDNs) is as follows:

Initial Request: A user asks for a file — maybe an image, a video, or a web page.

Nearest Server Response: This request is swiftly rerouted to the closest CDN server.

Content Delivery: If this server already has the content cached, it’s delivered straight to the user.

Fetching and Forwarding: In cases where the CDN server doesn’t have the content, it retrieves it from the origin server, stores it (caches it), and then sends it to the user. This step ensures that the next time someone asks for the same content, it’s ready to go instantly.

How to Guide CDN Behavior ?

We use request headers to control the CDN behavior.

Cache-Control: This header is the rulebook for how long the CDN and browser caches should store content, with directives like max-age, no-cache, public, and private.

Expires: It’s like an expiration date for content, marking when it becomes stale.

Vary: This header adapts the served content based on specific request headers, ensuring the right version of the content is delivered.

Choosing Between CDN and Origin Server

When to Opt for CDN ?

• You’re distributing static assets (images, CSS, JavaScript).
• High availability and performance across various regions are crucial.
• Offloading the origin server is a priority.

When to Go Direct to Origin Server ?

• The content is dynamic, frequently changing, or personalized.
• Real-time processing or fresh data is needed.
• Complex server-side logic is involved that can’t be handled by a CDN.

Examples of headers 

In Apache to add browser or CDN specific cache control headers :

You can add below in main Apache config files ( httpd.conf. or virtual host files )

Set Cache control header for specific file types :

<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|webp|css|js|ico|woff2?)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
</IfModule>

 

No Cache for dynamic file types :

<IfModule mod_headers.c>
    <FilesMatch "\.(json|html)$">
        Header set Cache-Control "no-store, no-cache, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </FilesMatch>
</IfModule>

 

 You can use mod Expiry (mod_expires) as another option for expiring headers

<IfModule mod_expires.c>
    ExpiresActive On

    ExpiresByType html "access plus 600 seconds"
    ExpiresByType image/jpeg "access plus 1 day"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>



 

How To Set different cache value for Browser and CDN ?

Example for html file type you can use different header if your CDN supports it,

Cache-controls tell browser not to store it, or you can have some max age value like 10 mins etc.. 

S-maxage tells CDN to store for 1 hrs

<IfModule mod_headers.c>
    <FilesMatch "\.html$">

        # No cache for browsers
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"

         

        # 1 hrs cache for aws CDN
        Header set Cache-Control "s-maxage=3600, public"
    </FilesMatch>
</IfModule>