データフェッチの観点で見る Streaming SSR

Transcript

1. データフェッチの観点で見る Streaming SSR Masato Yamori / yamo Frontend Up! #6 @ DeNA TechCon 2024
2. 自己紹介 Masato Yamori / yamo 23新卒でwebフロントエンド書いています！ @yamosan @_yamosan
3. React 18 の Streaming SSR の話をします！
4. アジェンダ 1. Streaming SSRとは 2. これまでのデータフェッチ 3. Streaming SSR におけるデータフェッチ
5. 1. Streaming SSRとは
6. Streaming SSR とは サーバーサイドでデータフェッチしつつ、 レスポンスのストリーミングにより... 全てのデータが取得されるのを待つことなく UI を段階的にレンダリングできるようになった 🤔💭
7. Streaming SSR とは サーバーサイドでデータフェッチしつつ、 レスポンスのストリーミングにより... 全てのデータが取得されるのを待つことなく UI を段階的にレンダリングできるようになった Streaming SSR 以前のデータフェッチと比較して なにが出来るようになったかを見ていきます
8. 2. これまでのデータフェッチ
9. ① SPA 時代の React ※ SPA=サーバーサイドのJSランタイムを必要としないの意 ※
10. ① SPA 時代の React ※ SPA=サーバーサイドのJSランタイムを必要としないの意 ※
11. クライアントサイドデータフェッチの辛み • SEO対策/OGP対応が困難 • バンドルサイズの増加 • データフェッチまわりの実装の複雑化 ◦ 認証認可が絡む実装等が複雑になりがち ◦ シークレットキー等の取り回しが難しい ◦ 状態管理の肥大化 全てがクライアントサイドで実行されるため... ※ ※ 現在はGoogleなどJSをサポートしたクローラーもあるためSEOに不利であると一概には言えない
12. ② SSR ありの時代の React • SSR を行うフレームワークの登場 ◦ Next.js, Gatsby, Remix, etc. • SSR では DOM 操作の代わりに HTML 文字列を生成する • SSR に合わせてサーバーサイドでのデータフェッチが可能になった
13. ② SSR ありの時代の React
14. ② SSR ありの時代の React レスポンスが全体的に後ろ倒しになってしまう😵
15. https://github.com/yamosan/sandbox/tree/main/ts/nodejs/react-ssr-fetch-then-render
16. https://github.com/yamosan/sandbox/tree/main/ts/nodejs/react-ssr-fetch-then-render データ取得が増えると それにつられてレスポンスが遅くなる
17. 3. Streaming SSR におけるデータフェッチ
18. Streaming SSR とは(再掲) サーバーサイドでデータフェッチしつつ、 レスポンスのストリーミングにより... 全てのデータが取得されるのを待つことなく UI を段階的にレンダリングできるようになった
19. ③ Streaming SSR
20. ③ Streaming SSR
21. ③ Streaming SSR
22. Streaming SSR が解決する課題 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense Streaming SSR 以前
23. Streaming SSR が解決する課題 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense Streaming SSR
24. Streaming SSR はどう実現されているのか？ 最初に送られてくるチャンク
25. Streaming SSR はどう実現されているのか？ ロード完了後に送られるチャンク 🤔
26. Streaming SSR はどう実現されているのか？ ロード完了後に送られるチャンク(省略版) 😮💡
27. Streaming SSR はどう実現されているのか？ 1. fallback を即返却して表示する 2. 各UIパーツごとに並行してデータを取得する 3. 2が完了したUIパーツについて、該当箇所を置き換えるスクリプトをチャン クとして送信 4. 3のスクリプトが実行されてUIが置き換わる 5. 該当箇所がレンダリング(hydrate)され、インタラクティブになる
28. 4. まとめ
29. まとめ • Streaming SSR は React18 で追加された機能 • 全てのデータが取得されるのを待つことなく、UI を段階的にレンダリング することが可能になった • 内部的にはUIを置き換えるスクリプトをチャンクとして送ることで実現し ている
30. ご清聴ありがとうございました