Задержка (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). Но если произошла ошибка, вам нужно использовать предохранители (opens in a new tab), чтобы её отловить:

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

💡

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

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

Обычно, когда вы включаете 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
  // ...
}

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

Серверный рендеринг (SSR)

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

TypeScript Промежуточное ПО (Middleware)