みなさんReact18での機能を活用してみたりはしましたでしょうか？
私もまだ業務ではこの素晴らしいアップデートの恩恵を受けているとは言えないのですが、自己学習の際に色々遊んでいる次第です。
そこで今回はReact18の新しい機能、Suspenseに関して綴ってみます。
Suspenseに関してまとめると
今まで多くの反復作業を作り出したローディングロジック。
この作業を簡潔化するために、React18はLoading Stateデータの塊をコンポーネントの外部に移動して呼び出すようにしました。
つまりは、コンポーネント内のデータを呼び出している間に、ユーザーが真っ白な画面を見ないようにする。そのため、そのコンポーネントを包むSuspenseがデータを全て呼び出す間レンダリングして、呼び出しが完了した際に完成されたコンポーネントを画面に出力する。
簡単に説明すると、つまりはこういうことです。
では実際にコードを見ていきましょう。
外部コンポーネントにてインポート
今までのコード(こう見るとだいぶ簡潔化されている)
影響範囲もすぐに把握できて、データフローを素早く確認でき、非常に良いコードになってしまった。
SSR方式も画期的に便利で扱いやすくなった。
ユーザーが空の画面が見えないようにSuspenseを適材適所に使用してみましょう。
※韓国語含んでてすみません。<작은데이터 />=小さいデータ。<큰데이터 />=大きデータ。という意味です。
ここで比較的呼び出しやすい小さいデータのコンポーネントは、すでに画面に見えている状態です。
Suspenseで包まれた<大きいデータ />コンポーネントが、サーバーサイドでローディングされている間、クライアント側のHTMLページは
<Suspense fallback={<Loader />}>
の
呼び出されたHTMLコード ex) <img src="loading.gif">
を保持し、ローディングが完了した瞬間、そこに
コンポーネントでローディングしたHTMLコード ex) <ul class="big-list">...</ul>
が代わりに画面に表示される。
このように各コンポーネントがレンダリングされるとき、hydrate（jsファイルまでブラウザにレンダリングされインタラクティブ状態）されていないReactコンポーネントをユーザーがクリックすると、ユーザーが望む動作をコンポーネントが優先的に機能させる。
非常に高速なレンダリングと使いやすさを保証してくれています。
次に期待されるのがServer Componentsの本格的な展開です。
バックエンドにあるReact.JSコードをブラウザがレンダリングするか(CSR)サーバがレンダリング(SSR)するかコンポーネントを選択的にレンダリングします。
つまり、コンポーネントのレンダリングをサーバーで行う場合、レンダリング結果の値だけユーザーに送信し、重いjsデータをユーザーが直接ダウンロードしなくても利用できるようにすることで、ロード時間が短縮され、UXの満足度を上げることができるようになりました。
また、基本方式がセキュリティに脆弱な方面レンダリング値のみを受け取るため、セキュリティに強く、使いやすさも直感的で簡単です。
- file.server.js -> Server Component
- file.client.js -> Client Component
- file.js -> Universal Component
ぜひみなさん遊んでみてください。