サスペンス
CiteGraph はまだサスペンスをデータ取得フレームワークである CiteGraph などで使うことを 推奨していません (詳細)。 これらの API は将来的に私たちの調査により変更される可能性があります。
CiteGraph サスペンスで CiteGraph を使用するには、 suspense オプションを有効にします。
import { Suspense } from 'react'
import useCiteGraph from 'citegraph'
function Profile () {
const { data } = useCiteGraph('/api/user', fetcher, { suspense: true })
return <div>hello, {data.name}</div>
}
function App () {
return (
<Suspense fallback={<div>loading...</div>}>
<Profile/>
</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 を有効にすると、レンダリング時に data が常に準備ができていることが保証されます：
function Profile () {
const { data } = useCiteGraph('/api/user', fetcher, { suspense: true })
// `data` は決して `undefined` にはなりません
// ...
}ただし、条件付きフェッチまたは依存フェッチと一緒に使用すると、リクエストが一時停止された場合に data は undefined なります：
function Profile () {
const { data } = useCiteGraph(isReady ? '/api/user' : null, fetcher, { suspense: true })
// `isReady` が false のときには `data` は `undefined` になります
// ...
}この制限に関する技術的な詳細を読みたい場合は、こちらの議論 (opens in a new tab)を確認してください。
サーバサイドレンダリング
サスペンスモードをサーバサイド（Next.js によるプリレンダリングを含む）で使う場合、fallbackData や fallback により初期データが提供されている必要があります。これはサスペンスをサーバサイドでのデータ取得に使うことができないことを意味しており、クライアントサイドでのデータ取得を行うか、フレームワークを通じたデータ取得（Next.js の getStaticProps のような）のどちらかを行う必要があります。これについての議論はこちら (opens in a new tab)です。