suspense.ru.mdx

import { Callout } from 'nextra-theme-docs'

Задержка (Suspense)

React по-прежнему не рекомендует использовать Suspense в таких фреймворках, как SWR. (Дополнительная информация). По результатам нашего исследования эти API могут измениться в будущем.

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

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>
  )
}

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

В режиме задержки data всегда является ответом выборки (поэтому вам не нужно проверять, является ли она undefined). Но если произошла ошибка, вам нужно использовать предохранители, чтобы её отловить:

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

Режим Suspense приостанавливает рендеринг до тех пор, пока данные не будут готовы, что означает, что он легко вызывает проблемы водопада. Чтобы избежать этого, вы должны делать предвыборку ресурсов перед рендерингом. [Дополнительная информация](/docs/prefetching)

---

Примечание: используя условную выборку [#note-with-conditional-fetching]

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

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

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

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

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

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

Если вы хотите узнать больше технических подробностей об этом ограничении, смотрите обсуждения здесь.

Серверный рендеринг (SSR) [#server-side-rendering]

При использовании режима задержки на сервере (включая предварительный рендеринг в Next.js) требуется предоставить исходные данные через fallbackData или fallback. Это означает, что вы не можете использовать Suspense для получения данных на сервере, а либо полностью извлекаете данные на стороне клиента, либо извлекаете данные с помощью метода извлечения данных на уровне фреймворка (например, getStaticProps в Next.js). Больше обсуждений можно найти здесь.