編集

データフェッチングの Suspense は現在非推奨

そもそも SWR の suspense 機能は experimental だが、React と SWR の開発者はデータフェッチングに Suspense を利用することを非推奨にしている。

SWR と Suspense の問題

Suspense を使用するデータフェッチングはライブラリレベルではまだサポートされていない。

renderToPipeableStream – React

Suspense 内部のコンポーネントはサーバーサイドでも実行されるため SWR と Suspense を使用するとハイドレーションのミスマッチが発生する問題が紹介されている。

この解決策として、Suspense を含むコンポーネントを Client でのみレンダリングされるようにしたりlazy, next/dynamicなどを利用して SSR させない方法と、Dan 先生が紹介していた fallbackData を利用する方法が紹介されている。fallbackData を利用する場合、Suspense の fallback が表示されなくなる点には注意。

Suspense and Server-Side Rendering · Issue #1906 · vercel/swr

編集