【React】Suspenseのすごさ（Streaming HTML と Selective Hydration）

2023.01.07

Suspenseはすごいです！

Next.jsでSSRでアプリを作ったものの、初回レンダリング時何も表示されない画面の待機時間が長く、UX悪すぎだろ！それならCSRで作るわ！とSSRの使用を諦めてしまってませんか？

はい、私がそうです。

この待機中に静的部分の表示ができてしまう処理を”Streaming HTML”と言いますが、v18.0のReactで適用されたSuspenseを使えば、なんとこれができてしまいます！

CSRとSSRのいいとこ取りができる。これがSuspenseのすごさです。

それでは見ていきましょう！

ReactのSuspenseは、公式ドキュメントで以下のように記載されている通り、Loadingの表示をしてくれるものと単に捉えられがちですが、Suspenseが行っている、Suspenseの本質とは何なのかを詳しく見ていきたいと思います！

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

説明は以下のように書かれています。

<Suspense> lets you display a fallback until its children have finished loading.

Suspenseの2つのすごい機能

Suspenseを使うことで次の2つのメリットを享受できちゃいます。

単語だけ言われてもよくわからないので詳しく解説します！

特に1は見逃せません！

Streaming HTMLとは何をするものなのかを詳しく見ていきましょう。

SSRでアプリを作った場合、サーバーサイドでデータが構築されるので、初期起動時に画面に何も表示されない待機時間が長くなりUXがとっっても悪くなります。

そもそもSSRを使用するメリットは何なのかですが、以下2点のメリットがあります。

上記より、CSRよりはSSRを選定することが望ましいのです。

ですが、前述の通りSSRは初回待機時間が長いです。

じゃあどうすればいいのー

これを解消してくれるのがSuspenseです。

CSRでLoadingアニメーションを表示するような挙動をSSRでもできるというわけです！

Suspenseを使用しないこれまでのSSRは、画面をまとめてHTMLを構築していましたが、Suspenseを使うことで、SSRの対象をエリアを限定して指定することができ、CSRのような挙動が実現できます。

つまりHTMLをストリーミングすることができるというわけなんです。

もうひとつのSuspenseのすごい機能であるSelective Hydrationについて見ていきましょう。

Hydrationの対象をSelective、つまり選択できるということです。

ん？それがわかんないんだよ！

そもそもHydrationとは何かですが、サーバー側で生成されたHTMLにJavaScriptを紐付ける処理のことを言います。

通常は、コードが記述された上から順番にこの処理が行われます。

しかし、Suspenseを使うことで、Hydrationをユーザが見たいコンテンツを優先して行ってくれます。

そんな優先順位どうやって特定するのさ！ユーザの見たいコンテンツなんて！

この選択される優先順位がどう決まるかというと、、これがすごいです！

ユーザがクリックしたところのコンテンツを優先して処理されるんです！

いやーReactすごいですねー。

以上、ご覧いただきありがとうございました。

詳しいSuspenseの使い方は以下で解説していますのでご覧ください。