Learn all about Cache for dummies

Hello everyone,

Let’s together learn all about the Cache today, especially in Software & Web Development.

DummyTechDev will help you find out why Cache is one of the best ways to boost up our applications’ performance 😎

Learn all about Cache for dummies: What is Cache?

In simple terms, for instance: page A

Page A needs to call to several APIs to load & render the page. Every time we open page A, it will always trigger the API calls.

It’s fine for “critical” data that need to be precise. However, there is always data that won’t change much from time to time (e.g.: Country, Timezone, Region, Category Type, etc).

So it is unnecessary to call the API every time, stressing the servers, slow render, etc.

That’s where Cache comes into play.

When we load the data for the first time, we can store that data in a specific storage. Then every time we open page A, check for the data inside the storage:

• If it exists => use that data
• If not => load API

That’s how Cache works in a dummy term.

The Cache Layers

There are so many cache layers that you want to know. Let’s check them out.

Note: DummyTechDev only covers Cache Layers that are relevant for Software/Web Development.

DNS

When setting up a DNS record (A, AAAA, etc). You will see there is a Time-To-Live (TTL) option. To specify how long the DNS record should be cached in our machine.

DNS will be cached in our local machine network. To clear the DNS cache, you will need to run a command in Administrator mode.

Best practice: we won’t likely change the DNS record really that often, so we can set the TTL up to 30 days.

Static Files

Browser Caching

For static files (images, videos, CSS, JS, etc), we can specify the Cache-Control header max-age (TTL). It is recommended to set it as long as possible.

When the browser loads the files for the first time, if the Cache-Control header is available with a proper cache configuration, the browser will automatically store your static files.

So every time we visit the page again, the browser will use the cached files instead of loading the file over the network again.

Utilizing Content Delivery Network (CDN)

This is a PRO option, by utilizing the CDN, our static files will be served as fast as possible.

CDN will help us:

• Deliver the files from the nearest region servers.
• Automatically handles Cache-Control for us
• Can invalidate the cache on demand (which normal browser caching can’t do)

Server-side

There are many things we can cache from the server side:

• Data from query (SQL)
• Computed data from specific business logic
• etc

From the server side, we can use any storage that we want to, e.g.:

• File storage
• Memory storage (Memcached, Redis, etc)
• DB storage
  • MongoDB or any other NoSQL databases
  • SQL database (key-value design)

Note:

• The server side can cache the data that the server side uses too, not just return it to clients.
• Most invalidate cache logic will be handled from the server side.

Client-side

There are several storages we can use on the Client-side:

• Local Storage: long-lived storage, that can only be cleared manually.
• Session Storage: short-lived storage, will be cleared after closing the browser.
• IndexedDB: structured data storage (SQL-like), can only be cleared manually too.

We can utilize these storages to cache API responses for reusable & reduce API calls (give less stress to the servers)

Learn all about Cache for dummies: Final Words and Conclusion

Well, those are the relevant Cache layers for Software and Web Development.

The cache is cool and boosts our applications. However, once the data is updated, we must invalidate the cache to load & cache the new data (to avoid confusion, misunderstanding, and trust)

Thanks for reading!