Suspense の仕様変更について議論を受けて、良い修正は見つかるまで React v19 のリリースを延期する予定であるという発言が React コアチームメンバーからありました。

sophie alpert on Twitter / X

Suspense の仕様変更とは、今まで複数のコンポーネントを含んでいた場合に並行してコンポーネントをリクエストしていたものが、順に解決されるようになったことです。

https://github.com/facebook/react/pull/26380

この変更は、CPU 負荷の軽減が目的であったと言及されています。

this was not motivated by RSC/Vercel but actually the FB site which is faster this way due to less CPU load. - https://x.com/sophiebits/status/1800966114048147495

これは、Render as You Fetch パターンなど fetch をはやく実行するようにコードを構成していると恩恵が受けられるものでしたが、そうでない場合は悪影響あるため反発が起きました。

Next.js などサーバーのある構成では容易に恩恵を受けられますが、SPA などでは具体的にどうように対応すればいいか、ドキュメントが十分とは言えません。

また Preloading が推奨されていますが、これはコンポーネントでは親に fetch を巻き上げることを前提にしており、関心の分離との矛盾が指摘されています。コンポーネント自体を React.lazy で分割＆遅延読み込みする場合は、次のようにすればいいだけなので問題はありません。

const componentPromise = import("./some-component");
const LazyComponent = React.lazy(() => componentPromise);

加えて、SWR や React Query、Relay、React Router などライブラリ毎での対応を覚える必要があり、非推奨になっているものがあることにも注意が必要です。React Router ではloaderを利用することで実現できる。

現在はこの issue で議論されており、Suspense の挙動を切り替えられるようにする提案が出ています。

https://github.com/facebook/react/issues/29898

そもそも 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