How CDN Servers Optimize Static Content Delivery: HTTP Request Handling Explained for Developers


2 views

Content Delivery Networks (CDNs) function through a distributed network of edge servers positioned strategically across geographical locations. When a user requests static content (like images, CSS, or JavaScript files), the CDN routes the request to the nearest edge server rather than the origin server. This proximity reduces latency through:

// Simplified CDN routing logic (pseudo-code)
function handleRequest(userRequest) {
  const edgeServer = findNearestEdgeServer(userRequest.location);
  if (edgeServer.hasCachedContent(userRequest.resource)) {
    return edgeServer.serveFromCache(userRequest.resource);
  } else {
    const originResponse = fetchFromOriginServer(userRequest.resource);
    edgeServer.cacheContent(userRequest.resource, originResponse);
    return originResponse;
  }
}

The typical HTTP request lifecycle through a CDN:

  1. DNS Resolution: User's DNS query is routed to CDN's DNS infrastructure
  2. Edge Selection: CDN identifies optimal edge server based on geolocation and load
  3. Cache Check: Edge server verifies if content exists in cache (with proper TTL)
  4. Origin Fetch: For cache misses, the edge server retrieves from origin and caches
  5. Response Delivery: Content served with CDN-specific headers (e.g., X-Cache: HIT/MISS)

CDNs implement various cache invalidation methods that developers should understand:

# Example: Using cache-control headers for CDN caching
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: public, max-age=31536000
ETag: "xyz123"
Last-Modified: Wed, 21 Oct 2022 07:28:00 GMT

Common invalidation approaches include:

  • Query string versioning (style.css?v=2.1.4)
  • Path-based versioning (/v2/assets/logo.png)
  • Manual purge through CDN API

Here's how to integrate Cloudflare CDN with a web application:

// Node.js example of cache-aware static file serving
const express = require('express');
const app = express();

app.use('/static', express.static('public', {
  maxAge: '1y',
  immutable: true,
  setHeaders: (res, path) => {
    if (path.endsWith('.js')) {
      res.set('X-SourceMap', ${path}.map);
    }
  }
}));

app.listen(3000);

Modern CDNs offer developer-centric capabilities:

// Example: Using Cloudflare Workers for edge logic
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // Modify request at edge
  const url = new URL(request.url);
  url.hostname = 'origin.example.com';
  
  // Apply country-specific logic
  const country = request.cf.country;
  if (country === 'GB') {
    // UK-specific content modification
  }
  
  return fetch(url, request);
}

Content Delivery Networks (CDNs) operate by distributing static content across a network of geographically dispersed servers. When a user makes an HTTP request, the CDN's edge server closest to the user responds, reducing latency. This is achieved through DNS resolution that directs requests to optimal servers.

Here's a typical request flow:


1. User requests example.com/image.jpg
2. DNS resolves to CDN's edge server (e.g., cloudfront.net)
3. Edge server checks cache:
   - If cached: serves immediately (HTTP 200)
   - If not: fetches from origin (HTTP 304)
4. Response includes caching headers:
   Cache-Control: public, max-age=31536000
   ETag: "xyz123"

CDNs use various methods to handle stale content:

  • Time-based expiration (Cache-Control headers)
  • Manual purging via API
  • Versioned URLs (e.g., /v2/image.jpg)

Here's how to configure a CDN in AWS CloudFront:


// CloudFront Distribution Configuration
{
  "DistributionConfig": {
    "Origins": {
      "Items": [
        {
          "DomainName": "your-s3-bucket.s3.amazonaws.com",
          "Id": "S3-Origin",
          "S3OriginConfig": {
            "OriginAccessIdentity": ""
          }
        }
      ]
    },
    "DefaultCacheBehavior": {
      "TargetOriginId": "S3-Origin",
      "ViewerProtocolPolicy": "redirect-to-https",
      "AllowedMethods": {
        "Items": ["GET", "HEAD"],
        "Quantity": 2
      },
      "CachedMethods": {
        "Items": ["GET", "HEAD"],
        "Quantity": 2
      }
    }
  }
}

Modern CDNs offer powerful features:


// Edge Computing Example (Cloudflare Workers)
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Modify response at edge
  const response = await fetch(request)
  const modified = new Response(response.body, response)
  modified.headers.set('X-Edge-Processed', 'true')
  return modified
}

To maximize CDN benefits:

  • Implement proper cache headers
  • Use content hashing for immutable files
  • Leverage HTTP/2 and Brotli compression
  • Set optimal TTL values based on content type