Deep Dive into Caching: Techniques for High-Performance Web Apps
Tags: webdev, javascript, programming
Published: 2024-06-20 14:55:27

Normal Developers: Wait Caching I know what's that, just saving information locally.

I mean you are correct in a way but...

In today's fast-paced digital world, users expect web applications to be fast and responsive. One of the key techniques to achieve high performance in web applications is caching. Caching can drastically reduce load times, decrease server load, and enhance the overall user experience. 


Let's go with the basics

## Caching
Caching is the process of storing copies of files or data in a temporary storage location so that they can be accessed more quickly. When a request is made, the system first checks the cache; if the requested data is present, it can be served immediately without needing to retrieve it from the original source. This process reduces the time and resources required to deliver the data.

### When to Cache?
- The data that doesn't change frequency can be cached.


### Types of Caching

#### 1. Client-Side Caching:
- **Browser Caching** : Browsers store static assets like HTML, CSS, JavaScript, and images locally. Using cache control headers, you can define how long assets should be cached.

```
Cache-Control: max-age=3600
```

The browser already uses multiple techniques to cache. Most of the `GET` responses are cached by default.

#### 2. Server-Side Caching:

- **HTTP Caching** : Utilize HTTP headers such as ETag, Cache-Control, Expires, and Last-Modified to control caching behavior.

- **Content Delivery Network (CDN)**: CDNs cache your content at various geographically distributed servers, reducing latency and improving load times for users around the globe.

> Here is a small knowledge regarding the CDN,

 [Jio cinema](https://www.jiocinema.com) is a streaming platform, Whenever there is an IPL(Indian Premier League) going on and the servers are on heavy load, the response of a user's home screen is cached using CDN and client.


- **Reverse Proxy Cache** : Tools like Nginx can act as intermediaries that cache responses from your server, reducing the load on your web server. 


### 3. Database Caching

- **Query Caching**: Store the results of expensive database queries to speed up subsequent requests. Most database systems, like MySQL and PostgreSQL, offer built-in query caching like using Indexing on the primary key, which makes a HashMap with the address of the location of the data.

- **Object Caching**: Use in-memory data stores like Redis or Memcached to cache objects retrieved from a database, reducing the need to perform repetitive and expensive queries.

### 4. Application-Level Caching: 

- **Page Caching**: Store the entire rendered HTML of pages that don't change frequently.

- **Fragment/Component Caching**: Cache parts of a page (like sidebar widgets) that change less frequently than the main content.

- **Data Caching**: Cache expensive data computations or API calls.

There are many more techniques to implement this caching strategy


Thanks for reading a simple and short blog about caching in Web applications. Follow to learn the real magics of programming and make me motivated.