Using Redis Caching and the Redis CLI to Improve API Performance
Tags: react, api
Published: 2023-03-08 15:25:53

## What is Redis?

Using Redis caching is a simple way to improve the performance of your APIs. Redis (**Re**mote **Di**ctionary **S**erver) is a fast, open-source, in-memory, key-value data store. It delivers sub-millisecond response times, enabling millions of requests per second for real-time applications. 

Redis is a key-value-based[ NoSQL](https://databasecamp.de/en/data/nosql-databases) database that stores data in memory (in RAM).

Redis is often used for caching; geospatial storage; chat, messaging, and queues; and gaming leaderboards. It’s well-suited to these tasks because it is simple, fast, and easy-to-use; supports a variety [of data structures](https://redis.io/docs/data-types/tutorial/); allows for storing key and value pairs as large as 512MB; and [Redis Sentinel](https://redis.io/topics/sentinel) provides high availability for non-clustered Redis.

However, Redis requires huge amounts of RAM, depending on the type of application you’re running; failovers in master components cause all slave components to lose all of their data; and data can only be accessed via keys.

## Setting up Redis

We will set up[ Redis](https://redis.io/download/) using[ Docker](https://hub.docker.com/_/redis/)<u>.</u>

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image10_ed3fd7af962e0609781cea51c37f061f.png" alt="CLI command to install Redis."/></figure>

[Save this code ](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=4a2548ad24)

Nowadays, there are some hosting providers, such as[ AWS](https://aws.amazon.com/redis/),[ Redis](https://redis.com/)<u>,</u> or[ Upstash](https://upstash.com/?utm_source=goredis), that provide Redis on the cloud.

There are many ways to connect to[ Redis](https://redis.io/docs/clients/). In our case, we will be using the[ Redis CLI](https://redis.io/topics/rediscli). Since we have the Docker setup ready, let's connect.

Here is an example of using Redis CLI commands to set, get and delete a value from the Redis database:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_1cbae1a067e0e0e0fe3e6b45be3016c4.png" alt="The Redis CLI commands to set, get and delete."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=a41d49b693)

Some other useful Redis CLI commands:

- `keys`: find all keys
- `FLUSHALL`: delete all keys from all databases
- `FLUSHDB`: delete all keys from the currently selected database
- `EXPIRE key 120`: delete a key in 120 seconds


## Caching APIs with Go and Redis

There are multiple clients available in[ Go](https://redis.io/docs/clients/#go) for implementing Redis. However, in this article, we will be using[ go-redis](https://github.com/go-redis/redis). Let’s look into how this works with Redis caching. 

### Go-Redis

Go-Redis is a type-safe Go Redis client library. It’s a Redis client that is able to support a Redis cluster and is designed to store and update slot info automatically with a cluster change. It also supports features like[ Pub/Sub](https://redis.uptrace.dev/guide/go-redis-pubsub.html),[ Sentinel](https://redis.uptrace.dev/guide/go-redis-sentinel.html)<u>,</u> and pipelining.

### Create APIs using Gorilla Mux

We will be using[ Gorilla Mux](https://github.com/gorilla/mux) to create the APIs locally. Gorilla Mux implements a request router and dispatcher to match the incoming requests.

Install it using the following command:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image9_5f8d996f8938ae001a255bbddca16ac8.png" alt="CLI command to install Gorilla Mux."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=e07c4f912d)

We will register the following endpoints:

1. `GET /users/:id`— to get a user’s information based on their id. A response might look like this:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image31_8f891cd59eb1d9e4c99ab08a3b17b019.png" alt="Sample response to the command &quot;GET /users/:id&quot;."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=c0134fae43)

1. `GET /users` — returns the users present in the database. A response might look like this:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image13_4fc5ac5c1df9e272cd2c4dfc0bea1460.png" alt="Sample response to the command &quot;GET /users&quot;."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=aec94ab5ab)

Next, we create the router instance using the `mux.NewRouter()` and assign the above-created routes to the respective handlers.

Each of the corresponding handlers is passed `ResponseWriter` and `Request` as parameters, which help in returning the desired response to the client.

We then specify the server details using `http.Server` to run an HTTP server.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image25_ec430ab4a1570a304d512d5625beed30.png" alt="Code snippet to run an HTTP server when using Redis caching."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=c70946acf7)

- `Handler`: This is the object that responds to the incoming HTTP requests that we created above.
- `Addr`: This specifies the TCP address for the server to listen on. By default, this is 80.
- `WriteTimeout`: The maximum duration before timing out the writes of the response.
- `ReadTimeout`: The maximum duration for reading the entire incoming request.


Finally, we run the server using `ListenAndServe` which listens to the network address specified in the `Addr` and serves the requests based on the `Handler`.

### Setting up Postgres

We will be using Postgres for our database. Install it using Docker by running the following:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image27_5b5120758170d3fe8f7c84aa1539bc00.png" alt="CLI command to install Postgres."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=dca6489bc8)

Then, verify that the new container is created and running `docker ps -a` at `0.0.0.0:5432`. 

To the database from your browser, install[ pgAdmin](https://www.pgadmin.org/download/) and connect to it using the above credentials. If all is well, you should see this:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_fba031dc5c64624915842b4f359522cb.png" alt="Example of a successful login."/></figure>

We will create a table called `users` which will have the following schema:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image15_79750eb3bfb0bc59c4f3b5642e68d2c2.png" alt="Example user schema."/></figure>

Let’s insert some dummy data using the following:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image22_de93c8cfc067c96b32fc04dbe64fd84f.png" alt="Code snippet to install dummy data into your user schema."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=3146479130)

To connect to `Postgres` with Go, we’ll install this:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image28_3dfb6c51ff6aa76a41dc6e9d28d55a50.png" alt="CLI commands to connect to Postgres with Go."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=0e4a41837f)

Here is the `struct` for the `users`:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image21_c519a4b23afa175aaa2f50af7126c35f.png" alt="Code snippet to illustrate the Users struct."/></figure>

[Save this code](https://b6278012-e3a5-4917-aedd-d98df2ddcf25.pieces.cloud/?p=067e45b616)

Once the `get users` API and the `get users by id` API are created, we will use Gorilla Mux to create a localhost server and listen to the endpoints.

## Redis Caching for APIs

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_65e1ff9c540d4c5c1033901deb9a359b.png" alt="Redis between database and client."/></figure>

To connect to Redis, we create a Redis Client using[ NewClient](https://github.com/go-redis/redis/blob/v8.11.5/redis.go#L546). We specify the address at which the Redis exists like so:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image23_484368298f051d8cde06174335e366a2.png" alt="Code snippet that shows how we specify an address for Redis."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=a39141bff8)

The configuration options are available through the `redis.Options` parameter.

- `Addr`: The string of the host and the port address. Since we are hosting Redis locally, the value is `127.0.0.1`. By default, Redis runs on port `6379`.
- `DB`: The database which will be selected after connecting to the server. By choosing 0, we will use the default database.
- `DialTimeout`: This specifies the timeout for establishing a new connection if our connection to the Redis server breaks.
- `ReadTimeout`: This allows us to put a timeout for the socket reads. If any of the Redis server requests reach this timeout, the command calling it will fail instead of blocking the server.


To check if we connected to the server, we call[ Ping](https://pkg.go.dev/github.com/go-redis/redis/v8#Client.Ping) using the client we created above. If there is no error, we are connected to the Redis server.

Finally, we return the Redis client, which internally may have zero or more connections.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_927306cdde1127498638d95aab435fd3.png" alt="A code snippet to return the Redis client."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=b9a74bbc84)

### Get and Set Keys

Whenever the front end asks for the details of a particular user, we fetch that user from the API and then cache it. Subsequent requests for the particular user will be served from the cache until the cache key expires (we set this expiration to 20 seconds). We will be making use of[ Set](https://github.com/go-redis/redis/blob/v8.11.5/commands.go#L890) to set the value in the cache.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image20_d0f4b1232d2cb2a0cbce59a4b0b40e75.png" alt="Code snippet showing the use of the Set command."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=57064ab312)

**Note**: Here we take the `user struct` as input. We then convert the Go struct into JSON (i.e., marshaling), as JSON is a language-independent data format.

We set the key pair with an optional expiration parameter of 20 seconds. This means the key will automatically expire in 20 seconds. If there is no expiration parameter, the key will not expire.

### Get Keys

We will be making use of[ Get](https://github.com/go-redis/redis/blob/v8.11.5/commands.go#L784) to retrieve the value of a key:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_6665f92f9658f9bc215c819f9a7264b1.png" alt="Code snippet to illustrate the Get command."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=8b0646b7f4)

The response is in the form of a string. We convert this byte data into the original user struct (i.e., unmarshalling).

Inside this function, we add a Redis publisher (which we’ll discuss in the next section).

### Calling APIs with Redis Caching

We have this API endpoint hosted locally—`GET /users/:id` — to get a user’s information based on the id. Once the client calls this endpoint, we first check if the value for this request can be served from the cache.

**Note**: If the data exists inside the cache, we set the source to "cache."

Logically, the first request will always hit the server, so the time to get the response will be longer.

**Note**: When getting the value from the server, we set the source to "API."

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image14_b256049ce8cfc39d4e77bfb503e9d54b.png" alt="Code snippet that demonstrates Redis caching."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=483b46a627)

As we can see in the above snippet, we first invoke `redis.GetUser` to check the cache. This function checks for the id inside the cache; if the id is present, it returns the value. If the result fails, the function returns `null` and we proceed to invoke the API `GetUserByID`, which hits our Postgres database.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image26_f18593d372a7634712c733c43cdf0c4b.png" alt="Code snippet that shows the results of a request to the an API that uses Redis caching."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=2cac4fab16)

This is how it looks when the key is not present in Redis:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image30_d194f9ad8acdf80c1e20db473a2eb3a1.png" alt="Example of a non-present key."/></figure>

The result from the API uses Redis caching, so the subsequent requests are now served by the cache (for 20 seconds, until the key expires).

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_c8b7ecb65b56300022bb271f823a3d16.png" alt="An example of a cached response being quickly returned."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=9a624dab00)

This is how it looks when the key is present in Redis:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_96778cd1bfb3f9aa4f0ac9f8a6f2dcf2.png" alt="An example of when the key is properly cached."/></figure>

## Redis Subscription using Pub/Sub

In the field of software engineering, publish-subscribe is a pattern where senders (publishers) categorize the messages into channels without knowing if there are any subscribers.

On the other hand, subscribers show interest in one or more channels and only receive messages that are of interest without knowing if there are any publishers.

This decoupling of publishers and subscribers allows for greater scalability.

### Redis Pub/Sub

We will be using Redis for pub/sub, however, there are various alternatives including Apache Kafka and Google cloud Pub/Sub.

In order to subscribe to channels, for example, `foo` and `bar`, the client uses[ SUBSCRIBE](https://redis.io/commands/subscribe) and provides the names of the channels:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_bcf29a0f39f3b9d334d4165b2e745151.png" alt="CLI command to subscribe to example channels."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=2ee443b3a1)

Messages sent by other clients to these channels will be pushed by Redis to all of the subscribed clients.

Once we have a Redis client subscribed to a channel, that client can no longer execute any other operations besides unsubscribing from the current channel and subscribing to more channels.

### Go-Redis Publisher

`Go-redis` allows users to publish messages and subscribe to channels. It also automatically re-connects to the Redis Server when there is a network error.

Inside our `get user` function, we will create a publisher using[ redis.Publish()](https://github.com/go-redis/redis/blob/v8.11.5/commands.go#L3172). This function takes two arguments: the name of the channel to which we want to send the message and the message.

In our case, we set the channel name to `send-user-name` and the payload is the response from `redis.GetUser` (see above).

We are sending the marshaled payload to the channel using `Publish` because it allows us to transfer the data as `[]byte`. Since we are using a `User` struct, it can be encoded into a `[]byte`.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_5324b0310d04e74fb704fe1ea062f38e.png" alt="Example of a pub/sub payload and the publication."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=41bd4ab4c7)

### Go-Redis Subscriber

We create a subscriber using the[ redis.Subscribe()](https://github.com/go-redis/redis/blob/v8.11.5/redis.go#L686) function.

We will have one argument: the channel we want to subscribe to. In our case, this is `send-user-name`.

`Subscribe` subscribes the client to the specified channels. Since this method does not wait for a response from Redis, the subscription may not be active immediately.

We create a new file that connects to the same Redis instance and calls the following:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image17_2f92cd575c46ef68f626a4cbd8185d3c.png" alt="Code snippet that connects to Redis and requests data."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=20544980a4)

The result of the `subscribe` is a Pub/Sub, and we extract the channel property out of this object.

This `Channel` returns a Go channel for concurrently receiving messages. If the channel is full for 30 seconds, then the message is dropped.

We loop over the channel and extract the data from it, which is of the type `Message`. Each message object comprises three arguments:

1. `Channel`: The channel name
1. `Payload`: The marshaled data received in the channel
1. `Pattern`: The pattern for the message


The data received inside the message can be fetched using `msg.Payload`. Since it is marshaled, we will unmarshal it using `UnmarshalBinary` and transform it back into a `User` struct.

Finally, we can access the struct properties and print inside the console. We can also print the message’s channel name just for fun!

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image29_3eace9a5918b0a9795d104a9b94d70a9.png" alt="Example of a printed message."/></figure>

Here, we get the message, “Received message from send-user-name” and the user details for Bob.

## Calling APIs using React

In the above section, we created and hosted APIs locally using[ Gorilla Mux](https://github.com/gorilla/mux). We will now consume these APIs from the front end using React.

We’ll be using Axios to call the APIs for which we previously discussed Redis caching. Let’s install this dependency by running the following command:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image24_af1671ce19ae1ec151911ef17b9d2158.png" alt="CLI command to install Axios."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=c60c4dba0a)

Axios is a lightweight HTTP client which makes calling requests very intuitive. It is similar to the JavaScript Fetch API. It works well with JSON data and does the heavy lifting of setting the request headers. Axios handles errors well when accessing the response and integrates well with `async-await` syntax, plus it can be used on the server as well as the client.

### Integrate with React

We will be using the hooks `useEffect` and `useState`. A [React hook](https://code.pieces.app/blog/creating-custom-hooks-in-reactjs) is a special function that lets you “hook into” React features.

### `useEffect`

Using this hook, we can inform React that our components need to do something after rendering. By default, `useEffect` runs after each render of the component where it’s called. A common use of this hook is to fetch and display data.

React remembers the function you passed and invokes it after the DOM updates.

**Note**: We have an empty array at the end of the `useEffect` hook to make sure that the internal function inside renders only once.

If we want our effects to run less often, we provide the second argument (which is an array of values). These can be considered the dependencies for the effect, and if there are any changes since the last time the effect was run, the effect runs again.

### `useState`

This is a way of adding a state to components and preserving some values between function calls. In general, variables “disappear” when the function exits, but state variables are preserved by React. This state can be an array, object, number, boolean, etc. The argument passed to `useState()` is the initial state.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image18_0a65e97bc0a74efed2304d3524a9d718.png" alt="An example of useState."/></figure>

[Save this code](https://aseem.pieces.cloud/?p=61fa45af76)

To make a `GET` request using Axios, we use the `.get()` method. The response is returned as an object.

We use the `.data` property from the response to get the requested data and set it inside the hook using `setFetchedData`.

#### Request Responses

When the page loads for the first time, the API hits our backend. The resulting `fetchedData` is then displayed on the page.

Notice that the source is the API.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image12_a108dbaa5f3edee2e93e84ce6df54ae0.png" alt="Request response from the API."/></figure>

On the next request, the API hits our cache, displayed with `source: cache`

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image19_c697bea62972566c270daf310c2a3445.png" alt="Response from the API that&#x27;s using Redis caching."/></figure>

## Conclusion

In this article, we used a `postgres` database to store users’ data. We created endpoints using Gorilla Mux, and on top of those endpoints, we integrated Redis caching into the API response from a React application. Remember that Redis is a powerful tool and what we covered is just the tip of the iceberg. For more information, consider reading the docs at [redis.io](http://redis.io/). You can also follow along with this article by watching this [YouTube tutorial](https://www.youtube.com/watch?v=pgh4DicuixA&t=1s).