[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>;
}

このように書くと、データを取得して表示しているコンポーネント内の処理が完了するまでは、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を提供することができるようになる。

最後に

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