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）。但如果发生错误，则需要使用错误边界 (opens in a new tab) 来捕获它：

<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`
  // ...
}

如果你想阅读有关该限制的更多技术细节，请查看这里的讨论 (opens in a new tab)。

服务端渲染

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

TypeScript 中间件