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

💡

请注意，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` will never be `undefined`
  // ...
}

但是，当与条件获取或依赖获取一起使用时，如果请求被**暂停**，data 将为undefined。

function Profile () {
  const { data } = useSWR(isReady ? '/api/user' : null, fetcher, { suspense: true })
 
  // `data` will be `undefined` if `isReady` is false
  // ...
}

如果您想了解有关此限制的更多技术细节，请查看这里的讨论 (在新标签页中打开)。

服务器端渲染

在服务器端使用 suspense 模式（包括 Next.js 中的预渲染）时，**必须**通过fallbackData 或 fallback 提供初始数据。这意味着您不能使用Suspense 在服务器端获取数据，而是通过框架级数据获取方法（例如 Next.js 中的 getStaticProps）获取数据。更多讨论可以找到这里 (在新标签页中打开)。

TypeScript 中间件