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

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

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

![img](/mosaic-code.jpg)
このように書くと、データを取得して表示している<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を提供することができるようになる。**

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

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

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

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

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

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

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

```
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を提供することができるようになる。**

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

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

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

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

Suspenseの使い方

続きを読むには単価診断を受けてください（30秒）