How to Improve Server Response Time via Caching

I recently ran audits on a website I had built with React via the Chrome Developer Tools and I realized performance on the site wasn’t the best. In my quest to find how to improve on my metrics I stumbled on server caching specifically with Redis.

Although I haven’t fully implemented it on my website, I built a simple node application to tests its functionality before I fully incorporate it into my production application. Below I will walk you through setting up Redis in your project.

Prerequisites

What you need for this tutorial is listed below. (I have linked resources to help you get the required tools. Hover on the links)

• A good text editor. (VS Code, Sublime Text etc)
• NodeJS installed. (Visit this link to setup NodeJS if you are having trouble)
• Postman to test our API routes.

Redis Setup

Now that you have all your prerequisite tools setup let’s dive into Redis.

A simple web architecture with Redis.

Notice that Redis is a a RAM storage which has faster retrieval time than our Database which is stored in the Disk. Keep this in mind throughout this article.

First we install Redis.

For Linux users, please visit this link to download Redis.

For Windows users you visit this link to download Redis.

Once you have the download file. Run the setup.

Once you have installed Redis, go to your terminal/command line interface and type

 redis-cli --version

Depending on the version you have installed, you should see something like this. This will let you know that you have installed Redis properly.

redis-cli 3.2.100 

Now let’s dive into NodeJS.

Open your terminal to a location of your choice and run the following codes

mkdir srtproject
cd srtproject
npm init -y

Open your project in your code editor.

You should see a folder structure like this.

Open the package.json file and edit it. Change the value of main from index.js to server.js. Remove the test script and add start and server scripts to the json file (In a later tutorial, we will use this to create an app on heroku). Your package.json should look like this.

{
  "name": "srtproject",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
    "server": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now let’s install all our dependencies for our project.

Go to your terminal once more and run

npm i express axios redis
npm i -D nodemon

Express: It is a minimalist web framework for NodeJS. It has an clear syntax and makes writing server side code easy.

Axios: Axios is a promise-based HTTP client that works both in the browser and in a NodeJS environment. It basically provides a single API for dealing with XMLHttpRequest s and Node’s HTTPinterface.

Redis: Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperlogs, geospatial indexes with radius queries and streams.

Nodemon: Allows us to run and watch our servers for any changes without having to manually restart it.

PS: Don’t worry too much about the definitions just be sure to understand what they are used for, and what problems they are solving.

When you are done installing the packages, your package.json file should look like this.

{
  "name": "srtproject",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
    "server": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  "axios": "^0.18.0”,
  "express": "^4.17.1",
  "redis": "^2.8.0"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

Now create a server.js file and let’s begin coding

First we setup a basic express server. In your server.js file type the following code.

Run

npm run server

Your results should look like this in your terminal

Now lets add our first route just to be sure out API layer is working properly

Edit your server.js code to look like this

Now open a good browser and visit this URL

http://localhost:5000/

You should have this response. I am using a chrome extension called JSON Formatter that’s why my json is formatted like that. You can install it here

Now that we know our server is working well. Let’s start with Redis implementation,

Edit server.js to look like this.

Now let’s test our route.

Open postman send a GET request to

http://localhost:5000/users

On my first instance I got this

Notice that the source of data is from the API and the SRT is 2299ms .

On first instance our request goes through the redis cache trying to find the resource. Since it doesn’t find it, our request is forwarded to our external API and then we get a response with our data resulting in a slow SRT.

Note that when our API response is coming back to us it is stored in our cache along the way before it reaches us. This is done so that in future requests we can access our resource directly from our cache instead of accessing it from our external resource.

Let’s see what happens on our next call.

On the second call our source of data is from the cache and our SRT drops all the way down to 11ms

What happens on our second call is that, our request is sent to our server and goes through the Redis cache. Since our resource has been cached on the first call we get our response directly from the cache without having to reach our external resource. Our SRT is cut down to only a fraction of the time.

For those of you who want to do the math on how much time you can improve on your SRT let’s do some high school arithmetic. Lol

Stretch yourself a bit before we dive in. 😃

We improved our server speed by a whopping 99.5%. Now that’s kickass.

And just like magic, we have successfully implemented caching on our server using Redis.

From our experiment above you might want to dive right into implementing caching on your server because ‘Who doesn’t want blazingly fast response on their server’, however I should point it out to you that you must do your research on why and when to use caching and not just implement caching by default on all your servers. In johnotu’s words ‘ It may be more rewarding to do this when it is needed rather than by default on all servers’.

This marks the end of the tutorial. If you found this helpful please share it.

Thank you to John Otu for the advice and for everyone who urged me to write this article. You were such a great motivation.

As usual, if you need clarification please don’t hesitate to leave a comment below. You can email me as well on josephakayesi@gmail.com or send me a DM on Twitter @josephakayesi. You can find me on Facebook via this link.

My chats are always open. 🙂