How to handle data caching in JavaScript CRUD operations.

20 Oct 2023

When building web applications, it’s important to consider how to efficiently manage data caching, especially when dealing with CRUD (Create, Read, Update, Delete) operations. Caching data can greatly improve the performance and responsiveness of your application by reducing the need to make repeated network requests to retrieve or update data.

In this blog post, we will explore different techniques and strategies to handle data caching in JavaScript CRUD operations. We will cover both client-side and server-side caching approaches to ensure a well-rounded understanding.

Introduction to Data Caching
Client-Side Data Caching
- Memoization
- Local Storage
Server-Side Data Caching
- In-Memory Caching
- Redis Caching
Cache Invalidation
- Time-Based Expiration
- Event-Based Invalidation
Conclusion

Introduction to Data Caching

Data caching involves storing a copy of frequently accessed data in a cache, which can be quickly retrieved instead of fetching it from the original data source. Caching can significantly reduce the load on the server and improve the overall performance of the application.

Client-Side Data Caching

Memoization

Memoization is a technique that allows you to cache the results of expensive function calls. By storing the results of a function in memory, you can avoid unnecessary recomputation when the same inputs are provided again. This technique is particularly useful for read operations, where the same data may be requested multiple times.

function memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

const getUser = memoize(async (id) => {
  // Simulated network request
  const response = await fetch(`/users/${id}`);
  const data = await response.json();
  return data;
});

const user = await getUser(123); // Cached response
const sameUser = await getUser(123); // Cached response, no network request

Local Storage

Local storage is a browser feature that allows you to store data locally within the user’s browser. You can leverage local storage to cache data on the client-side, making it easily accessible for subsequent operations.

const cacheKey = 'userCache';

// Save data to the cache
function cacheData(data) {
  localStorage.setItem(cacheKey, JSON.stringify(data));
}

// Retrieve data from the cache
function getCachedData() {
  const cachedData = localStorage.getItem(cacheKey);
  return cachedData ? JSON.parse(cachedData) : null;
}

// Example usage
const user = getCachedData();
if (!user) {
  // Data not in cache, fetch from the server and update the cache
  const response = await fetch('/users/123');
  const data = await response.json();
  cacheData(data);
} else {
  // Data found in cache, use cached data
  console.log(user);
}

Server-Side Data Caching

In-Memory Caching

In-memory caching involves storing data in the server’s memory, allowing for fast retrieval and reduced database queries. This technique is commonly used in server-side JavaScript frameworks like Express.js.

const usersCache = {};

app.get('/users/:id', (req, res) => {
  const { id } = req.params;

  if (usersCache[id]) {
    // Data found in cache, return cached response
    res.json(usersCache[id]);
  } else {
    // Data not in cache, fetch from the database and update the cache
    const user = db.getUser(id);
    usersCache[id] = user;
    res.json(user);
  }
});

Redis Caching

Redis is an in-memory data structure store that can be used as a caching layer. It is highly performant and widely adopted for caching purposes. Redis stores data in key-value pairs and provides expiration settings for cached data.

Using Redis as a caching layer requires setting up and configuring a Redis instance, but it provides more advanced caching capabilities compared to in-memory caching.

const redis = require('redis');
const client = redis.createClient();

app.get('/users/:id', (req, res) => {
  const { id } = req.params;

  client.get(`user:${id}`, (err, reply) => {
    if (reply) {
      // Data found in cache, return cached response
      res.json(JSON.parse(reply));
    } else {
      // Data not in cache, fetch from the database and update the cache
      const user = db.getUser(id);
      client.set(`user:${id}`, JSON.stringify(user), 'EX', 3600); // Cache for 1 hour
      res.json(user);
    }
  });
});

Cache Invalidation

Caches need to be invalidated to ensure data consistency. When updating or deleting data, cache entries related to the modified data should be removed to reflect the changes. There are two common cache invalidation strategies:

Time-Based Expiration

Setting expiration times on cache entries ensures that stale data is automatically removed from the cache. This approach is suitable for scenarios where data updates are relatively infrequent, and having slightly outdated data for a short period is acceptable.

Redis provides expiration settings through the EX command, as shown in the previous Redis caching example.

Event-Based Invalidation

With event-based invalidation, cache entries are invalidated based on specific events, such as database updates or external triggers. This approach requires more effort to implement but provides more precise control over cache invalidation.

For example, when a user updates their profile, you can trigger the invalidation of cache entries related to that user:

app.put('/users/:id', (req, res) => {
  const { id } = req.params;
  const updatedUser = req.body;

  // Update user in the database

  // Invalidate cache entry for the updated user
  client.del(`user:${id}`);

  res.json(updatedUser);
});

Conclusion

Efficiently managing data caching is crucial for improving the performance and responsiveness of web applications, especially when dealing with JavaScript CRUD operations. By leveraging client-side and server-side caching techniques, such as memoization, local storage, in-memory caching, and Redis caching, you can significantly reduce network requests and enhance the overall user experience.

Remember to handle cache invalidation properly to maintain data consistency. Whether you choose time-based expiration or event-based invalidation depends on the specific requirements of your application.

Now that you have a good understanding of how to handle data caching in JavaScript CRUD operations, you can start implementing these techniques in your own projects!

Tags: JavaScript, CRUD, Caching

Table of Contents