はじめに

ReactにはSuspenseという機能がありますが、主にデータを取得してる間に、ローディング中のアイコンを表示するなどの使い方をします。
なので、Suspenseはローディング中の画面表示を実装するだけの機能と思われがちですが、そうではなく、もっと奥深い機能になっています。
今回はそのSupenseについて解説していきます。

Suspenseの使い方

Suspenceの一般的な使い方は、以下のようになります。
(ドキュメント参照)

https://react.dev/reference/react/Suspense

このように書くと、データを取得して表示しているコンポーネント内の処理が完了するまでは、fallbackで指定したコンポーネントが表示されます。

重要になるキーワード

Suspenseを理解するうえで、重要になるキーワードは以下の3つです。

・SSR
・Streaming HTML
・Selective Hydration

SSR

　クライアント側でHTMLを生成するのではなく、サーバー側でHTMLを生成し、クライアント側に返して表示するレンダリング方法です。

Streaming HTML

　これはSuspenseごとに処理の速度(データの受け取りからの画面表示など)が違う時、処理が終わった要素から表示をしてくれる機能になります。
例えば、同じ画面に2つのSuspenseで囲った要素があった場合、今までは、全てのHTMLが生成されるまで、何も画面には表示していませんでした。
しかし、Streaming HTMLの機能によって、1つの処理が終わり、もう1つの処理が完成していない場合は、処理が終わっている要素を先に表示してくれます。

Selective Hydration

　Selective Hydrationというのは、ユーザーの興味のある箇所を優先して、HTMLの構築をする機能です。
例えば、ユーザーが下の要素(本来であれば、後に読み込まれるはずの要素)に興味があり、ローディング要素が表示されている下の要素をクリックした場合、Reactが優先度を判断し、下の要素を優先的に読み込み、先に表示させます。
それにより、ユーザー体験を向上させることができるということになります。

まとめ

☑データ取得中にローディングを宣言的に表示できるようになった。

☑Suspense単位でストリーミングされたり、ハイドレーションされるので、「どの単位をSuspenseで囲うか」という設計が重要になってくる。

☑今後、Reactはコンポーネント毎にSSRできるようになるので、Suspenseへの理解は必須になる。

☑Suspenseの設計を上手くすれば、より良いUXを提供することができるようになる。

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]