Q069: CDN, Edge Hosting and Static Asset Delivery
What Interviewers Want To Evaluate
This question tests whether you understand how frontend assets reach users globally. Interviewers want CDN caching, edge locations, origin, cache keys, invalidation, immutable assets, HTML freshness, compression, TLS, image delivery, and edge compute trade-offs.
For senior roles, the strongest answer connects CDN strategy to LCP, TTFB, reliability, cost, and release safety.
Short Interview Answer
A CDN caches and serves content from locations closer to users, reducing latency and origin load. Static assets with hashed filenames can use long immutable caching. HTML and dynamic responses need more careful freshness rules. Edge hosting can run lightweight logic near users, but it adds constraints around runtime APIs, cold starts, cache keys, and debugging. Good frontend delivery pairs CDN caching with asset retention, compression, correct headers, and observability.
Detailed Interview Answer
Frontend performance is not only JavaScript optimization. Delivery matters. If assets are far from users, uncompressed, poorly cached, or invalidated incorrectly, the UI feels slower before React or application code even runs.
CDNs sit between users and origin servers. They can terminate TLS, cache responses, compress assets, route traffic, and sometimes execute code at the edge.
Deep Technical Explanation
The request path is:
browser
nearest CDN edge
cache lookup
origin fetch on miss
cache store
response to browser
Cache headers, cache keys, and invalidation rules decide whether the edge can reuse a response.
Static Assets
Content-hashed JavaScript, CSS, fonts, and images can be cached aggressively because URL changes when content changes.
Cache-Control: public, max-age=31536000, immutable
HTML should usually revalidate or use shorter caching because the same URL may point to new assets after deployment.
Edge Hosting
Edge compute can personalize routing, handle redirects, run middleware, or serve lightweight APIs near users. But edge runtimes often have API limits compared with full Node.js and can be harder to debug.
Use edge logic where latency or global routing benefits justify the constraints.
Common Mistakes
A common mistake is caching personalized data at the CDN without user-specific cache keys or private controls.
Another mistake is deleting old assets immediately after deployment, causing stale HTML to reference missing chunks.
Architecture Discussion
Frontend delivery architecture should define cache rules by resource type: HTML, hashed assets, images, API responses, fonts, and personalized content. It should also define invalidation and asset retention strategy.
Trade-Offs
Aggressive caching improves speed and cost but increases staleness risk. Conservative caching improves correctness but can waste bandwidth and hurt repeat visits.
Real Production Story
Some users may see chunk-load errors after deployment because their cached HTML points to an asset that no longer exists. Retaining old assets and revalidating HTML reduces this class of bug.
Enterprise Example
An enterprise app with global users may serve static assets from CDN, SSR HTML from regional compute, and images from an optimization service. Observability should show CDN hit rate, origin errors, and geographic latency.
Performance Discussion
CDNs improve TTFB, asset download time, LCP, and origin scalability. Compression, HTTP/2 or HTTP/3, image formats, and cache headers all matter.
Security and Reliability Considerations
Be careful with cache keys for authenticated responses. Use private/no-store where appropriate. Configure TLS, security headers, and origin protection.
Senior Engineer Perspective
A senior engineer should answer by resource type and explain cacheability, invalidation, and release safety.
Lead Engineer Perspective
A lead should define CDN defaults, retention policy, incident playbooks for stale assets, and dashboards for cache hit ratio and origin load.
Debugging Workflow
For delivery bugs, check response headers, CDN cache status, asset URL hash, origin response, geography, invalidation history, and whether the browser is using memory cache, disk cache, service worker, or CDN cache.
Revision Notes
CDNs bring assets closer to users. Cache hashed assets aggressively. Revalidate HTML carefully. Never cache personalized data casually.
Key Takeaways
Delivery strategy is part of frontend architecture. The best bundle still feels slow if it is delivered poorly.
Follow-Up Questions
- What does a CDN do?
- What is an edge location?
- What is a cache key?
- Why can hashed assets be cached long-term?
- Why is HTML caching different?
- What is CDN invalidation?
- How do CDNs affect LCP?
- How can CDN caching leak data?
- What is edge compute?
- How do you debug chunk-load errors?
How I Would Answer This In A Real Interview
I would explain CDN request flow, then split by resource type: hashed assets, HTML, images, APIs, and personalized data. Then I would cover cache headers, invalidation, asset retention, edge compute trade-offs, and observability.