Suspenseを克服する。

Suspenseを今までちゃんと使ってこなかった...
ちゃんと理解できてなかった...
なのでここでしっかり理解を深めようと思います。

※発表用スライドのため、一部動画を使用していますが本ファイルでは再生されません。ご了承のほどお願いいたします。

Transcript

1. Suspenseを克服する。 株式会社Gemcook フロントエンドエンジニア 中薗 良太
2. プロフィール 名前 中薗 良太（ぞのりょー） 所属 株式会社Gemcook 職種 フロントエンドエンジニア（2年目） 趣味 バスケ、ベース、フェス、コーヒー、 マラソン、漫画（HUNTER×HUNTER、スラ ムダンク、呪術廻戦） 娘を愛でること
3. 01 Suspenseとは？ 02 Suspenseの基本的な使い方 03 Streaming HTML 04 Selective Hydration 05 React 18 と React 19 でのSuspenseの挙動の 違い アジェンダ
4. 01 Suspenseとは？
5. Suspenseとは？ 子要素が読み込みを完了するまでフォールバックを表示 させることができる機能（コンポーネント） このコンポーネントはまだ読み込み中なので表示しない でね！その間はローディング中のUIを表示してね！という 宣言ができる。
6. Suspenseとは？ 子要素が読み込みを完了するまでフォールバックを表示 させることができる機能（コンポーネント） Props children: 読み込み完了後に表示させるUI fallback: 実際に表示させるUIの読み込みが完了するまでの間表示させる代替UI
7. Suspenseとは？
8. 従来の書き方だと...
9. 従来の書き方だと...
10. このUIの問題点 HeaderやSidebarも重いコンポーネン トに引っ張られてローディングが表示 されてしまう。 UXの低下 アプリから離脱
11. 02 Suspenseの基本的な使い方
12. Suspenseの基本的な使い方 E <Suspense>コンポーネント でラッP E fallbackにローディング中の UIを記述
13. これでうまく行く!! .....??
14. Suspenseの基本的な使い方 D <Suspense>コンポーネント で全体をラッI D <Suspense>コンポーネント 内のPromiseが解決するまで childrenは全てローディング が表示される
15. Suspenseの基本的な使い方 G <Suspense>コンポーネント 内でさらに<Suspense>コン ポーネントをネストする
16. ネストしたSuspenseを使うと...
17. 3 HeaderやSidebarは先に表 3 重いコンポーネントだけローディ ングが表示される UXの向上 アプリ離脱率低下 ネストしたSuspenseを使うと...
18. まだ問題が残っている...
19. このUIの問題点 軽め 1秒くらいかかる 重め 3秒くらいかかる
20. このUIの問題点
21. このUIの問題点 どのように改善するか？
22. Suspenseの分割 <AlbumList> <TodoList> <Suspense> と を それぞれ でラップす る。
23. Suspenseの分割
24. 03 Streaming HTML
25. Streaming HTMLとは？ SSRの流れ (引用: https://tech.anotherworks.co.jp/article/react-suspense-react18)
26. Streaming HTMLとは？ Header TOP ABOUT Header TOP ABOUT AlbumList Header TOP ABOUT AlbumList TodoList Streaming HTML ˆ SSRでありながらCSRのようなレンダリングができp ˆ コンポーネントごとのSSRが可能
27. 04 Selective Hydration
28. 04 Selective Hydration Header TOP ABOUT Header TOP ABOUT AlbumList Header TOP ABOUT AlbumList TodoList
29. 04 Selective Hydration Header TOP ABOUT Header TOP ABOUT AlbumList Header TOP ABOUT AlbumList TodoList Header TOP ABOUT Header TOP ABOUT TodoList Header TOP ABOUT AlbumList TodoList ユーザーがインタラクションをすると...
30. 04 React 18 と React 19 でのSuspenseの挙動の違い
31. React 18 と React 19 でのSuspenseの挙動の違い AlbumList あれ？Suspenseの中に入れたコ ンポーネント、並列でfetchされた けどReact 19から直列に変わって ない？ https://github.com/facebook/react/ pull/26380#issuecomment-216617 8673 Reactのisse内で議論が活性化した
32. React 18 と React 19 でのSuspenseの挙動の違い React 18のSuspense React 19のSuspense
33. なぜ直列処理にしたのか？ Loading状態のレンダリング 再レンダリングの最適化 s 並列化された非同期処理の完了を待ってからfallbackが描画されるため、 Loading状態のレンダリングがブロッキングされてしまっていた。 s Suspense内のコンポーネントを全てレンダリングすv s いずれかのPromiseがresolveされたら再レンダリングされv s Promiseをthrowするコンポーネントがなくなるまで続けv s 再レンダリングが頻繁に起こってしまう
34. 今後の動向 並列処理を適応するか直列処理を適応するかをオプションで選択できる ようにする？ 問題が解決するまでReact 19のリリースを延期する
35. 今後の動向 並列処理を適応するか直列処理を適応するかをオプションで選択できる ようにする？ 問題が解決するまでReact 19のリリースを延期する
36. Suspenseまとめ 1 ローディングの状態を宣言的に記述できる 2 コンポーネントごとにSSRができる 3 ユーザーのインタラクションに合わせてHydrationする 4 React 19の動向に注目
37. ご清聴ありがとうございました！