nextjs-fetch-data-example/ai/nextjs-style-guide/applied/data-fetch/client-get-hook.md

---
title: Клиентский GET-хук
description: Получение REST-данных в Client Components через готовые GET-хуки REST-клиента.
keywords: [rest, client components, swr, get-хук, client state]
---

# Клиентский GET-хук

Клиентский GET-хук используется, когда данные зависят от состояния браузера: вкладки, фильтра, поиска, пагинации, модалки или действия пользователя.

## Когда использовать

- Запрос зависит от client state.
- Данные не обязательны для первого HTML.
- Пользователь меняет параметры запроса на клиенте.
- Нужны SWR-кеширование, дедупликация и ревалидация.

## Пример с вкладками

```tsx
'use client'

import { useState } from 'react'
import { StatusEnum, useGetPetList } from 'infra/pet-store-api'

const statuses = [StatusEnum.Available, StatusEnum.Pending, StatusEnum.Sold]

export function PetTabs() {
  const [status, setStatus] = useState(StatusEnum.Available)
  const { data: pets, isLoading, error } = useGetPetList({ status })

  return (
    <section>
      <div>
        {statuses.map((item) => (
          <button key={item} type="button" onClick={() => setStatus(item)}>
            {item}
          </button>
        ))}
      </div>

      {isLoading && <div>Загрузка...</div>}
      {error && <div>Ошибка загрузки</div>}

      <ul>
        {pets?.map((pet) => (
          <li key={pet.id}>{pet.name}</li>
        ))}
      </ul>
    </section>
  )
}
```

Компонент выбирает параметр `status`, но не знает про SWR-ключ и fetcher. Запрос выполняет готовый GET-хук REST-клиента.

## Если хука нет

Хук добавляется в REST-модуль сервиса:

```text
src/infra/pet-store-api/hooks/use-get-pet-list.hook.ts
```

Не создавайте локальный `useSWR` в компоненте.

## Плохо

```tsx
// Плохо — прямой вызов клиента в useEffect
useEffect(() => {
  petStoreApi.pet.findPetsByStatus({ status }).then(setPets)
}, [status])

// Плохо — useSWR в компоненте
const { data } = useSWR(
  ['pet-store-api', `/pet/findByStatus?status=${status}`],
  () => petStoreApi.pet.findPetsByStatus({ status }),
)
```

Такой код теряет единое место для ключей, дублирует fetcher и разносит инфраструктурные детали по UI.

## Когда выбрать другую стратегию

- Данные нужны до первого HTML — [Серверный await](./server-await.md).
- Клиентский хук должен получить начальные данные сразу — [Начальные данные для клиентских хуков](./client-hooks-initial-data.md).
- Нужно вычислить бизнес-состояние — [Business-композиция](./business-composition.md).