DEV Community: Igwe Chinonso

Client Side Caching

Igwe Chinonso — Thu, 04 May 2023 14:11:00 +0000

Introduction to Client-Side Caching

Client-side caching is a technique used to store frequently accessed web content on the client's machine, reducing the need for server round-trips and improving website performance. This technique is needed because network round-trips can cause latency and impact website performance.

Let's say you have a favourite book that you like to read every day. Instead of going to the library every time you want to read the book, you keep a copy of it on your bedside table. This way, you can pick up the book and start reading it right away, without having to go to the library every time.

In this scenario, the library is like the server where the book is stored, and your bedside table is like the cache where you've stored a copy of the book. Just like caching a website or app on your device, caching the book on your bedside table makes it much easier and faster to access, since you don't have to go all the way to the library every time you want to read it.

The primary advantage of client-side caching is faster website performance, which can lead to improved user experience, increased engagement, and higher conversion rates. Caching can also help reduce server load, reduce network traffic, and improve scalability.

Here is a code snippet to better explain how caching works

const cache = {
    '1-4': 1
}
function cachedComputation(a, b) {
    const key = `${a}-${b}`;
    if (cache[key]) {
      console.log("from cache");
      cache[key] = a + b;
      return cache[key];
    }
    for(let i = 0; i < 10000000000; i++) {}
    console.log("from database");
    cache[key] = a + b;
    return cache[key];
}
cachedComputation(1, 7); // console prints from database
cachedComputation(1, 4); // console prints from cache
cachedComputation(1, 7); // console prints from cache since we have already ran the function with 1, 7 as arguments and stored in the cache

This code demonstrates how to use caching to speed up function computations. The cache object stores the results of previous function calls, so when the function is called with the same arguments, it can return the result from the cache instead of recomputing it. If the result is not in the cache, the function performs the computation and stores the result in the cache for future use.

How Client-Side Caching Works

Caching works by storing a copy of a web resource on the client's machine and reusing it when the resource is requested again. HTTP caching uses caching headers to control caching behaviour and determine whether a client can use a cached copy or must fetch a fresh copy from the server.

Browsers can also cache web resources automatically using built-in caching algorithms. Caching headers, such as Cache-Control, Expires, and ETag, provide granular control over caching behaviour and can be set by the server.

Techniques for Implementing Client-Side Caching

Cache-Control is a caching header used to set cache expiration and validation rules. It provides granular control over caching behaviour and can be used to set a maximum age for cached resources, control cache revalidation, and prevent caching altogether.

Cache-busting is a technique used to force clients to fetch fresh copies of resources by changing the resource URL or version. This technique can be used to invalidate caches when the content has changed, ensuring that clients see the latest version.

Here's an example of how to implement cache-busting in a web application using a unique file name or query string parameter.

Unique file name approach:

<!DOCTYPE html>
<html>
<head>
  <title>Cache-Busting Example</title>
  <link rel="stylesheet" href="/styles.css?v=1.0">
</head>
<body>
  <h1>Cache-Busting Example</h1>
  <script src="/script.js?version=1.0"></script>
</body>
</html>

In this example, we've added a query string parameter to the file name for both the stylesheet and script tags. By changing the value of the version parameter, we force the client to download a new version of the file, even if it is already cached.

Query string parameter approach:

<!DOCTYPE html>
<html>
<head>
  <title>Cache-Busting Example</title>
  <link rel="stylesheet" href="/styles.css?v=<%= Date.now() %>">
</head>
<body>
  <h1>Cache-Busting Example</h1>
  <script src="/script.js?version=<%= Date.now() %>"></script>
</body>
</html>

In this example, we're using a server-side template engine like EJS to dynamically generate a new value for the version parameter based on the current timestamp. This has the same effect as the previous example, but with the added benefit of being able to generate unique cache-busting values on the server-side.

By using either of these techniques, you can invalidate caches and ensure that clients always receive the latest version of your files. It's important to note that cache-busting can impact performance, as clients will need to download new files every time the cache is invalidated. Therefore, it's important to use cache-busting sparingly and only when necessary.

Best Practices for Client-Side Caching

Setting Maximum Age and Expiration vs Validation
When setting cache headers, it's important to balance the benefits of caching with the need for fresh content. Setting a maximum age for cached resources can help ensure that clients get fresh content regularly. Expiration-based caching is useful for resources that don't change frequently, while validation-based caching is useful for resources that change frequently.
Avoiding Common Pitfalls
Common pitfalls of client-side caching include cache poisoning, cache inconsistency, and cache invalidation. To avoid these issues, it's important to set cache headers correctly, use cache-busting techniques, and ensure that cached resources are consistent and up-to-date.

Examples of Client-Side Caching Implementation

CSS and JavaScript Files
CSS and JavaScript files are critical to website performance, and caching these resources can help reduce page load times and improve user experience.
Images and Other Resources
Images and other resources, such as videos, can benefit greatly from client-side caching. By caching these resources, clients can load them faster, reducing page load times and improving performance.

Testing and Measuring Client-Side Caching Performance

Tools such as Chrome DevTools, Firebug, and Fiddler can be used to test caching performance by analyzing the caching headers and checking whether resources are being cached correctly. These tools can also be used to simulate different network conditions and test caching behaviour under different scenarios.

Network latency and time to first byte are critical factors in website performance and can be measured using tools such as Pingdom, GTmetrix, and WebPageTest.

In conclusion, as the web evolves, new caching techniques and technologies are likely to emerge. The use of content delivery networks (CDNs), progressive web apps (PWAs), and service workers are likely to play a larger role in client-side caching and website performance optimisation in the future. It's important for developers to stay up-to-date on the latest caching best practices and tools to ensure that their websites are fast, reliable, and engaging.

Closures

Igwe Chinonso — Wed, 03 May 2023 07:38:03 +0000

What is a closure?
An act or process of closing something, especially an institution, thoroughfare, or frontier, or of being closed.

I know you must be wondering are my here for closures in javascript or closures as regards our general english language communications? You are right to ask this question because the definition above is a google searched definition. That is not what we would be discussing today. We would be talking about closures in Programming using Javascript as language of instruction for code samples.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) (MDN)

I'll try to explain this with an example. Take a look at this code below. It is just a plain javascript function that logs the value of count.

What do you think would be the output of invoking the function?.
The first invocation would print out the value 1 for count. The second invocation would also print out the value 1. This is because of the way javascript works in relation to execution context creation. when we run our the javascript code above, the first thing javascript does is to save the function declaration in memory and then skip to line 8 and invoke the function(First invocation). Invoking or calling a function means we should step into the code defined in the function line by line and exit when we meet a return statement.(When no return statement is found, function automatically returns undefined.

On line 4, we are defining a variable count and setting it's initial value to 0.
On line 5, we are incrementing the value of the variable count by 1. So the new value of count becomes 1 on line 5.
On line 6, we are logging the value of count to the console.
So ones we hit line 6 and there are no other codes to be ran by the function, the function returns and value 1 is printed on the console. This brings an end to the first function call.

On line 9, we have another invocation of the function and we follow through the same process again.
Count get's initialised to 0 on line 4, we increment it by one on line 5 and print the value to console on line 6. Value one is still printed to the console.

What if we want to find a way to prevent the count variable to always start from 0 but rather, it should remember it's previous value and keep incrementing by 1?. That is where the need for closure arises.

We can implement this with ease using closure as shown below.

As you may have noticed, we have a similar function as before but this time with an inner function called closure which remembers the value of count from previous invocations.

We first assign the value of the function invocation of the outer function outerWithClosure to a variable called myFunction. Then we run the first myFunction and this increment the value of count from 0 to 1. Since myFunction is a closure, it remembers the previous value of count which is now 1 so on the second invocation, count begins at value 1 and get's incremented to 2 and so on.

As a bonus, we can create a closure function which returns is a factory function.This would help us create increment and decrement closure functions as shown below.

Fix Page not found error when visiting a route directly in react

Igwe Chinonso — Tue, 09 Aug 2022 09:22:10 +0000

Have you ever gotten the dreaded "sorry page not found" error when visiting a particular route by entering its url directly in your browser tab after pushing your react app to production(netlify for instance)?.

There is a quick fix you can use to resolve the issue.

create a file called _redirects in your public folder and add this line of code

/* /index.html 200.

This should fix your error.

Thanks for reading.

Pitch me on Python or Go

Igwe Chinonso — Tue, 17 May 2022 07:34:43 +0000