[日本語訳]SWR ドキュメンテーション サスペンス

追記: 2021年6月8日

SWR公式日本語訳ページが追加されたので、そちらをご覧ください

このページは Suspense – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください

サスペンス

🚨 サスペンスは現在、Reactの実験的な機能です。 これらのAPIは、Reactの一部になる前に、警告なしに大幅に変更される可能性があります。
詳しくはこちら

💡 React SuspenseはまだSSRモードをサポートしていないので注意してください。

suspenseオプションを有効にして、React SuspenseでSWRを使用できます。

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 オプションは、ライフサイクルの中で変更することができないことに注意してください。

サスペンスモードでは、data は常にフェッチレスポンスです（したがって、データがundefinedかどうかを確認する必要はありません）。 ただし、エラーが発生した場合は、error boundaryを使用してエラーをキャッチする必要があります。

<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
  <Suspense fallback={<h1>Loading posts...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>

備考: 条件付きフェッチと共に使用する

通常、Susponseを有効にすると、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 })

  // `data` は `isReady` が false の時に `undefined` になる
  // ...
}

この制限に関する技術的な詳細を読みたい場合は、こちらのディスカッションを確認してください。