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 永遠是 fetch 回應（因此您不需要檢查它是否為 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 中介層