CDN caching for static content in HLD - Architecture Diagram

System Overview - CDN caching for static content

This system delivers static content like images, stylesheets, and scripts to users quickly and reliably. It uses a Content Delivery Network (CDN) to cache static files close to users, reducing load on the origin server and improving response times globally.

Architecture Diagram

User
  |
  v
+----------------+
|      CDN       |
+----------------+
  |
  v
+----------------+
| Load Balancer  |
+----------------+
  |
  v
+----------------+
| Origin Server  |
+----------------+

Components

User

client

Requests static content like images and scripts

CDN

cache

Caches static content geographically close to users to reduce latency and origin load

Load Balancer

load_balancer

Distributes incoming requests to origin servers for cache misses

Origin Server

service

Hosts the original static content and serves cache misses

Request Flow - 8 Hops

User → CDN

CDN → CDN

CDN → User

CDN → Load Balancer

Load Balancer → Origin Server

Origin Server → Load Balancer

Load Balancer → CDN

CDN → User

Failure Scenario

Component Fails:CDN

Impact:Users experience slower load times as requests go directly to origin server, increasing origin load and latency

Mitigation:Users fallback to origin server via load balancer; origin must be scaled to handle increased traffic; CDN provider redundancy can reduce downtime

Architecture Quiz - 3 Questions

What component serves cached static content directly to the user?

A Origin Server

B Load Balancer

C CDN

D User

Design Principle

This design uses a CDN to cache static content close to users, reducing latency and origin server load. The load balancer ensures scalable and reliable origin server access for cache misses, improving overall system performance and availability.