QSystem Design · Interview preparation
What caching layers exist in a frontend architecture?
A frontend may use browser caches, CDNs, service workers, query caches and server caches.
The idea to remember.
A frontend may use browser caches, CDNs, service workers, query caches and server caches. Each layer needs an explicit freshness and invalidation strategy to avoid serving stale sensitive data.
01Learn by doing
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 / BEGINNERKeep data access separate from request handling.
async function getProduct(id) {
return productRepository.findById(id);
}Intermediate: use cache with a clear lifetime
02 / INTERMEDIATECache a read with a time to live and invalidate on writes.
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 SCENARIOPaginate and validate input rather than returning thousands of records.
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);
});02Check your understanding
Try it in your own words.
Explain what caching layers exist in a frontend architecture 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 ↗