> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/05.-state-management/3.-redisclient.md).

# 3. RedisClient

This document explains how to save and retrieve data using Redis in Server Components and Client Components.

Since it's difficult to save or retrieve state in Server Components, we provide redisClient.

{% stepper %}
{% step %}

### Server Component

The following code is an example of writing and using Redis in a Server Component.

* Data is saved and retrieved using the getRedisValue and setRedisValue functions.
* The setRedisValue function takes a Key, an object, and an expiration time (in seconds). (For example, a last argument of 500 means 500 seconds; if nothing is passed, it's stored indefinitely.)
* The getRedisValue function retrieves the data corresponding to a Key from Redis.

{% code title="app/page.tsx (Server Component example)" %}

```
```

{% endcode %}

```javascript
import { restApi } from '@/lib/common/plugins/restApi';
import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient';

const SearchPage = async () => {
  const test = {
    test1: 'test1',
    test2: '999999',
    test3: 'weqweqweqwe',
  };

  // 마지막 500의 경우 500초로, 아무것도 안넣을 경우 무한으로 저장됨
  await setRedisValue('test998877', test, 500);

  const value = await getRedisValue('test998877');
  console.log(value);

  return (
    <>
      test1111
    </>
  );
};

export default SearchPage;
```

{% endstep %}

{% step %}

### Client Component

The following code is an example of using Redis on the client side. The usage and explanation are the same as for the Server Component.

{% code title="app/page.client.tsx (Client Component example)" %}

```
```

{% endcode %}

```javascript
'use client';

import { restApi } from '@/lib/common/plugins/restApi';
import { useEffect, useState } from 'react';
import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient';

const TestPage = () => {
  async function setRedis() {
    const test = {
      test1: 'test12222',
      test2: '99999922222222',
      test3: 'weqweqweqwe222222',
    };
    await setRedisValue('test998877', test, 500);
  }

  async function getRedis() {
    const value = await getRedisValue('test998877');
    console.log(value);
  }

  return (
    <>
      test2222
      <button onClick={() => setRedis()}>레디스 저장</button>
      <button onClick={() => getRedis()}>레디스 조회</button>
    </>
  );
};

export default TestPage;
```

{% endstep %}
{% endstepper %}

You can confirm that the data has been saved to the Redis server, as shown below.

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FSmYCpejdXvR6tvXk0YDK%2Fimg%20(9).png?alt=media&#x26;token=1d955aeb-88d3-4c33-90de-b5e4d50760e6" alt="" width="563"><figcaption></figcaption></figure>