Suspense

🚨

目前 Suspense 是 React 的一个实验特性。这些 API 可能会有重大改变，并且在成为 React 一部分之前不会有任何警告。
了解更多

💡

注意：SSR 模式还不支持 React Suspense。

你可以启用 suspense 选项，从而让 SWR 和 React Suspense 一起使用：

import { Suspense } from 'react'
import useSWR from 'swr'
function Profile () {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
  return <div>hello, {data.name}</div>
}
function App () {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Profile/>
    </Suspense>
  )
}

💡

注意，不允许在生命周期中更改 suspense 选项。

在 Suspense 模式下，data 总是请求响应（因此你无需检查它是否是 undefined）。但如果发生错误，则需要使用错误边界来捕获它：

<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
  <Suspense fallback={<h1>Loading posts...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>

注意：使用条件请求

通常，当启用 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 })
  // 如果 `isReady` 是 false，`data` 将会是 `undefined`
  // ...
}

如果你想阅读有关该限制的更多技术细节，请查看这里的讨论。

Suspense

注意：使用条件请求#

注意：使用条件请求