> 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/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management/3.-redisclient.md).

# 3. RedisClient

이 문서는 서버 컴포넌트와 클라이언트 컴포넌트에서 레디스를 사용하여 데이터를 저장하고 조회하는 방법을 안내합니다.

서버 컴포넌트에서는 상태를 저장하거나 조회하기 어렵기 때문에 redisClient를 제공합니다.

{% stepper %}
{% step %}

### Server Component

다음 코드는 레디스를 서버 컴포넌트에서 작성하고 사용하는 예제입니다.

* getRedisValue와 setRedisValue 함수를 통해 데이터를 저장하고 가져옵니다.
* setRedisValue 함수에 Key, 객체, 유효시간(초)를 설정합니다. (예: 마지막 인자 500은 500초. 아무것도 넣지 않으면 무한으로 저장됨)
* getRedisValue 함수를 사용하여 레디스에서 Key에 해당하는 데이터를 가져와서 사용합니다.

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

```
```

{% 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

다음 코드는 클라이언트 측에서 레디스를 사용하는 예제입니다. 사용 방법과 설명은 Server Component에서와 동일합니다.

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

```
```

{% 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 %}

다음과 같이 레디스 서버에 데이터가 저장된 것을 확인할 수 있습니다.

<figure><img src="/files/xdHmlvZYcHdB95TCmISE" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management/3.-redisclient.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.