[React] Suspenseをより深く解説
はじめに
ReactにはSuspenseという機能がありますが、主にデータを取得してる間に、ローディング中のアイコンを表示するなどの使い方をします。
なので、Suspenseはローディング中の画面表示を実装するだけの機能と思われがちですが、そうではなく、もっと奥深い機能になっています。
今回はそのSupenseについて解説していきます。
Suspenseの使い方
Suspenceの一般的な使い方は、以下のようになります。
(ドキュメント参照)
import { Suspense } from 'react';
import Albums from './Albums.js';
export default function ArtistPage({ artist }) {
return (
<>
<h1>{artist.name}</h1>
<Suspense fallback={<Loading />}>
<Albums artistId={artist.id} />
</Suspense>
</>
);
}
function Loading() {
return <h2>🌀 Loading...</h2>;
}
このように書くと、データを取得して表示している<Albums>コンポーネント内の処理が完了するまでは、fallbackで指定した<Loading>コンポーネントが表示されます。
重要になるキーワード
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を提供することができるようになる。
Discussion