Skip to content
文档
Suspense

Suspense

🚨

React 仍然不建议在 SWR 这样的数据框架中使用 Suspense (更多信息)。根据我们的调查结果,这些 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>hello, {data.name}</div>
}

function App () {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Profile/>
    </Suspense>
  )
}
💡

请注意,SWR 的 suspense 选项并不支持在渲染过程中发生改变。

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

<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
  <Suspense fallback={<h1>Loading posts...</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 })

  // 如果 `isReady` 是 false,`data` 将会是 `undefined`
  // ...
}

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

服务端渲染

当在服务端渲染(包括 Next.js 中的预渲染功能)中使用 suspense 模式时,必须通过 fallbackData 或 fallback 提供初始数据,这意味着你不能使用 Suspense 在服务器端获取数据,而是完全使用客户端的数据请求,或者通过框架级的数据获取方法(例如 Next.js 中的 getStaticProps)获取数据,更多的讨论可以在这里找到。