sr✳SHUBHAM RAJFRONTEND ENGINEER
FULL TECHNICAL GUIDEAdvanced3 min read

What role does a CDN play in frontend performance?

A CDN places cacheable assets closer to users and reduces origin requests.

System Design#cdn#performance
THE ANSWER / PLAIN ENGLISH

The idea to remember.

A CDN places cacheable assets closer to users and reduces origin requests. Cache-control policy, content hashing and safe invalidation are essential for predictable deployments.

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: separate responsibilities

01 / BEGINNER

Keep data access separate from request handling.

JAVASCRIPT / EXAMPLE
async function getProduct(id) {
  return productRepository.findById(id);
}

Intermediate: use cache with a clear lifetime

02 / INTERMEDIATE

Cache a read with a time to live and invalidate on writes.

JAVASCRIPT / EXAMPLE
const cached = cache.get('catalog');
if (cached && cached.expiresAt > Date.now()) return cached.value;
const value = await database.listProducts();
cache.set('catalog', { value, expiresAt: Date.now() + 60_000 });
return value;

Real scenario: resilient search

03 / REAL SCENARIO

Paginate and validate input rather than returning thousands of records.

JAVASCRIPT / EXAMPLE
app.get('/api/questions', async (req, res) => {
  const page = Math.max(1, Number(req.query.page) || 1);
  const limit = Math.min(50, Math.max(1, Number(req.query.limit) || 20));
  const result = await searchQuestions({ page, limit, query: String(req.query.q || '') });
  res.json(result);
});

Try it in your own words.

Explain what role does a CDN play in frontend performance without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse System Design study guides ↗
← Back to question library

Have something
in mind?

Start a conversation