import { Callout } from 'nextra/components'

# Задержка (Suspense)

<Callout emoji="🚨" type="error">
  Задержка (Suspense) в настоящее время является **экспериментальной** функцией React. Эти API могут значительно
  измениться без предупреждения, прежде чем станут частью React.

[Подробнее](https://reactjs.org/docs/concurrent-mode-suspense.html)

</Callout>

<Callout>
  Обратите внимание, что React Suspense ещё не поддерживается в режиме SSR.
</Callout>

Вы можете включить опцию `suspense`, чтобы использовать SWR с React Suspense:

```jsx
import { Suspense } from 'react'
import useSWR from 'swr'

function Profile() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
  return <div>привет, {data.name}</div>
}

function App() {
  return (
    <Suspense fallback={<div>загрузка...</div>}>
      <Profile />
    </Suspense>
  )
}
```

<Callout>
  Обратите внимание, что опцию `suspense` нельзя изменять в жизненном цикле.
</Callout>

В режиме задержки `data` всегда является ответом выборки (поэтому вам не нужно
проверять, является ли она `undefined`). Но если произошла ошибка, вам нужно
использовать
[предохранители](https://ru.reactjs.org/docs/concurrent-mode-suspense.html#handling-errors),
чтобы её отловить:

```jsx
<ErrorBoundary fallback={<h2>Не удалось получить посты.</h2>}>
  <Suspense fallback={<h1>Загрузка постов...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>
```

---

### Примечание: используя условную выборку

Обычно, когда вы включаете `suspense`, гарантируется, что `data` всегда будет
готова к рендерингу:

```jsx
function Profile() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })

  // `data` никогда не будет `undefined`
  // ...
}
```

Однако при её использовании вместе с условной выборкой или зависимой выборкой —
`data` будет `undefined`, если запрос **приостановлен**:

```jsx
function Profile() {
  const { data } = useSWR(isReady ? '/api/user' : null, fetcher, {
    suspense: true
  })

  // `data` будет `undefined` если `isReady` имеет значение false
  // ...
}
```

Если вы хотите узнать больше технических подробностей об этом ограничении,
смотрите
[обсуждения здесь](https://github.com/vercel/swr/pull/357#issuecomment-627089889).
