Suspense

🚨

React は、SWR のようなデータフレームワークで Suspense を使用することを **推奨していません** (詳細情報)。これらのAPIは、今後の研究結果に基づいて変更される可能性があります。

React Suspense と SWR を連携して使用するには、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
  // ...
}

この制限に関するより技術的な詳細については、ここの議論（新しいタブで開きます）を確認してください。

サーバーサイドレンダリング

サーバーサイド（Next.js のプリレンダリングを含む）で Suspense モードを使用する場合は、fallbackData または fallback を介して初期データを提供する必要があります。つまり、サーバー側でデータを取得するために Suspense を使用することはできません。完全にクライアント側のデータ取得を行うか、フレームワークレベルのデータ取得メソッド（Next.js の getStaticProps など）を使用してデータを取得する必要があります。詳細な議論はこちら（新しいタブで開きます）にあります。

TypeScript ミドルウェア