CDN caching for static content in HLD - System Design Exercise

Design: CDN caching for static content

Design focuses on caching static content using CDN edge servers, cache invalidation, and request routing. Does not cover dynamic content caching or origin server design.

Functional Requirements

FR1: Serve static content (images, CSS, JavaScript) to users globally with low latency

FR2: Cache static content at edge locations close to users

FR3: Support cache invalidation when content updates

FR4: Handle at least 1 million requests per second globally

FR5: Ensure high availability with 99.9% uptime

FR6: Support HTTPS for secure content delivery

Non-Functional Requirements

NFR1: Latency for content delivery should be under 100ms for 95% of requests

NFR2: Cache hit ratio should be above 90% to reduce origin load

NFR3: System must handle traffic spikes up to 5x normal load

NFR4: Content updates should propagate to edge caches within 5 minutes

Think Before You Design

Questions to Ask

❓ Question 1

❓ Question 2

❓ Question 3

❓ Question 4

❓ Question 5

❓ Question 6

Key Components

Origin server for static content

CDN edge servers distributed globally

DNS-based request routing

Cache storage and eviction policies

Cache invalidation mechanism

TLS termination for HTTPS

Design Patterns

Cache-aside pattern

Time-to-live (TTL) based caching

Push vs pull cache invalidation

Geo DNS routing

Load balancing at origin

Reference Architecture

          +-------------------+
          |   User Devices    |
          +---------+---------+
                    |
                    v
          +---------+---------+          +----------------+
          |    DNS Resolver   |--------->| Geo DNS Routing |
          +---------+---------+          +--------+-------+
                    |                             |
                    v                             v
       +------------+------------+     +----------+----------+
       |   CDN Edge Server 1     | ... |  CDN Edge Server N   |
       | (Cache + TLS Termination)|     | (Cache + TLS Termination)|
       +------------+------------+     +----------+----------+
                    |                             |
                    +-------------+---------------+
                                  |
                                  v
                         +--------+--------+
                         |   Origin Server  |
                         | (Static Content) |
                         +------------------+

Components

Origin Server

Any HTTP server (e.g., Nginx, Apache)

Stores original static content and serves cache misses

CDN Edge Servers

Distributed cache servers at global edge locations

Cache static content close to users to reduce latency

Geo DNS Routing

DNS service with geographic routing (e.g., Route53 Geo DNS)

Direct user requests to nearest CDN edge server

Cache Storage

In-memory or SSD cache on edge servers

Store cached static content with TTL and eviction policies

Cache Invalidation System

API or push mechanism to purge or update cache entries

Ensure updated content is refreshed on edge caches

TLS Termination

Edge server SSL/TLS certificates and termination

Serve HTTPS content securely from edge

Request Flow

1. User requests static content URL.

2. DNS resolver queries Geo DNS routing to find nearest CDN edge server.

3. User request is routed to closest CDN edge server.

4. Edge server checks cache for requested content.

5. If cache hit, edge server returns content immediately.

6. If cache miss, edge server requests content from origin server.

7. Origin server responds with static content.

8. Edge server caches content with TTL and returns to user.

9. When content updates, origin triggers cache invalidation API.

10. Edge servers purge or update cached content accordingly.

Database Schema

Not applicable as system primarily uses cache storage and origin file storage.

Scaling Discussion

Bottlenecks

Origin server overload due to cache misses during traffic spikes

DNS routing delays or failures affecting request routing

Cache storage limits on edge servers causing frequent evictions

Cache invalidation delays causing stale content delivery

TLS termination CPU overhead on edge servers

Solutions

Use origin load balancing and auto-scaling to handle cache miss spikes

Use highly available and globally distributed DNS services

Increase cache storage capacity and optimize eviction policies

Implement near real-time push-based cache invalidation

Use hardware acceleration or dedicated TLS termination services

Interview Tips

Time: 10 minutes for requirements and clarifications, 15 minutes for architecture and data flow, 10 minutes for scaling and trade-offs, 10 minutes for Q&A

Clarify content types and update frequency

Explain CDN edge caching benefits and cache hit impact

Describe DNS-based geo routing for latency optimization

Discuss cache invalidation strategies and TTL trade-offs

Address scaling bottlenecks and mitigation techniques

Highlight security with HTTPS and TLS termination

Practice

1. What is the main purpose of using a CDN cache for static content?

easy

A. To delete static files after use

B. To store static files closer to users for faster access

C. To encrypt all static content

D. To increase the size of static files

Solution

1. Step 1: Understand CDN caching basics

   A CDN cache stores copies of static files like images and scripts near users to reduce loading time.

2. Step 2: Identify the main benefit

   By storing files closer, users get faster access and the main server has less load.

3. Final Answer:

   To store static files closer to users for faster access -> Option B

4. Quick Check:

   CDN caching = faster static content delivery [OK]

Hint: CDN caches static files near users to speed up loading [OK]

Common Mistakes:

• Thinking CDN increases file size
• Confusing caching with encryption
• Assuming CDN deletes files after use

2. Which HTTP header is commonly used to control CDN caching behavior for static content?

easy

A. Cache-Control

B. Content-Type

C. Authorization

D. User-Agent

Solution

1. Step 1: Identify headers related to caching

   Cache-Control header tells browsers and CDNs how long to keep cached content.

2. Step 2: Exclude unrelated headers

   Content-Type defines file type, Authorization is for access, User-Agent identifies client.

3. Final Answer:

   Cache-Control -> Option A

4. Quick Check:

   Cache-Control header manages caching [OK]

Hint: Cache-Control header sets caching rules for CDNs [OK]

Common Mistakes:

• Confusing Content-Type with caching
• Using Authorization header for caching
• Thinking User-Agent controls cache

3. Given the following Cache-Control header: Cache-Control: max-age=3600, public, what does it mean for CDN caching?

medium

A. Cache content publicly for 3600 seconds

B. Do not cache content at all

C. Cache content privately for 3600 seconds

D. Cache content indefinitely

Solution

1. Step 1: Interpret max-age directive

   max-age=3600 means cache content for 3600 seconds (1 hour).

2. Step 2: Understand public directive

   public means content can be cached by any cache, including CDNs and browsers.

3. Final Answer:

   Cache content publicly for 3600 seconds -> Option A

4. Quick Check:

   max-age=3600 + public = public cache for 1 hour [OK]

Hint: max-age sets cache time; public allows shared caching [OK]

Common Mistakes:

• Confusing public with private caching
• Assuming max-age disables caching
• Thinking max-age means indefinite caching

4. A CDN is serving outdated static content even after you updated the files on your origin server. What is the most likely cause?

medium

A. The origin server is down

B. The user's browser cache is disabled

C. The static files were deleted from the origin

D. The CDN cache was not invalidated or purged

Solution

1. Step 1: Understand CDN cache behavior

   CDNs keep cached copies until they expire or are explicitly purged.

2. Step 2: Identify cause of stale content

   If files updated on origin but CDN still serves old files, cache invalidation likely missing.

3. Final Answer:

   The CDN cache was not invalidated or purged -> Option D

4. Quick Check:

   Stale CDN content = missing cache purge [OK]

Hint: Stale CDN content? Check cache invalidation first [OK]

Common Mistakes:

• Assuming origin server down causes stale CDN cache
• Thinking deleted origin files cause stale CDN content
• Blaming user browser cache for CDN stale content

5. You want to ensure users always get the latest version of your static files after you update them, but still benefit from CDN caching. Which approach is best?

hard

A. Disable CDN caching and serve files directly from origin

B. Set Cache-Control to no-cache for all static files

C. Use versioned URLs for static files and set long cache expiration

D. Use short cache expiration without versioning

Solution

1. Step 1: Understand versioned URLs

   Versioned URLs (e.g., style.v2.css) change file names on update, forcing CDN to fetch new files.

2. Step 2: Combine with long cache expiration

   Long cache expiration lets CDN cache files efficiently without frequent revalidation.

3. Step 3: Avoid disabling caching or short expiration

   Disabling caching or short expiration hurts performance and increases load.

4. Final Answer:

   Use versioned URLs for static files and set long cache expiration -> Option C

5. Quick Check:

   Versioned URLs + long cache = fresh and fast [OK]

Hint: Version URLs + long cache = fresh content with speed [OK]

Common Mistakes:

• Disabling CDN caching unnecessarily
• Using no-cache header causing slow loads
• Relying on short expiration without versioning