TanStackで効率的なルーティングとデータ取得を実現

初夏のJavaScript祭りにて使用した資料です。

TanStackを用いてアプリケーションを実装するためのポイントと注意点を解説しています。

https://javascript-fes.doorkeeper.jp/events/172450

Transcript

1. TanStackで効率的な ルーティングとデータ取得を実現 株式会社AI Shift・安井大晟（ytaisei） JSFes
2. 自己紹介 • 新卒1年目 • Webフロントエンド • React、TypeScript • 去年のJSFesで初登壇 • TSKaigi登壇
3. 元々BtoB SaaSの開発を経験していた TanStackを紹介する経緯 ⇨ SEOや初期描画をtoCほど気にしなくて良い ⇨ INP（Interaction to Next Paint）が重要 技術選定どうする？？？
4. Frameworkを採用する場合の疑問 • Next.jsなら1発アウトの事故が怖いので、 App Routerのキャッシュの扱いはどうする？ • Remixなら必然的にData Flowに沿った設計になるが、 全てのアプリケーションでFitする？ TanStackを紹介する経緯
5. Frameworkを採用する場合の疑問 • Next.jsなら1発アウトの事故が怖いので、 App Routerのキャッシュの扱いはどうする？ • Remixなら必然的にData Flowに沿った設計になるが、 全てのアプリケーションで Fitするか？ Frameworkを採用すれば全て解決！！！ではない とはいえ、Frameworkを使わない場合はどうする？？？ TanStackを紹介する経緯
6. 最適解はなくても、選択肢が欲しい！
7. Vite+Reactなら • （少し前） React Router＋Redux （最近だと）TanStack QueryやSWRも増えてきた Frameworkを使うなら • Next.js • Remix • Remix SPA Mode Reactの選択肢を整理
8. • TanStack Router + Query Reactの選択肢を整理 新しい選択肢を提案したい！ Vite+Reactなら • （少し前） React Router＋Redux （最近だと）TanStack QueryやSWRも増えてきた
9. TanStack Router について 02 04 01 03 Summary 05 Table of contents Request Waterfall を防ぐ設計 TanStack Query について React Router との比較
10. TanStack Router 01 File-Based・Type Safe・Code Splitting・Search Prams as State Management
11. • Fully Type Safe • Built-in Loader Caching • URL State Management 昨年のクリスマスに Versionが1系になった
12. File-Basedなルート生成 参考：https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing
13. Code-Basedで ルーティングを 実装する必要がない 各ルートごとに • Route Component • Error Component • Pending Component • データ取得のためのLoader を定義することができる
14. 型安全でシンプルなルーティング 参考：https://tanstack.com/router/latest/docs/framework/react/guide/type-safety
15. ルーティングパスだけでなく、 Search Paramsなども型安全に扱える
16. バンドルサイズを軽減するCode Splitting 参考：https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting
17. lazy.tsxとroute.tsxに 分割するだけで Code Splittingしてくれる 各RouteごとにCode Splitting
18. route.tsx Critical Route lazy.tsx Non-Critical/Lazy Route 初回ロード時に読み込まれるコード 遅延して読み込まれるコード
19. Search Paramsによる状態管理 参考：https://tanstack.com/router/latest/docs/framework/react/guide/search-params
20. • 型がstring型に限定される • 構造がFlatである • Parameterの実装がPathと密結合している なぜURLSearchParamsを使わない？
21. • 型がstring型に限定される ⇨ 値に応じた型定義をしたい • 構造がFlatである ⇨ ネストしたオブジェクトも扱いたい • Parameterの実装がURL Pathと密結合している ⇨ URL Pathと分離して扱いたい なぜURLSearchParamsを使わない？
22. • Routeで型定義 • Zodと組み合わせ可能 • JSON-Firstで複雑な構造が扱える • 型安全に扱える • Validation可能 TanStack Routerを使うと
23. ユーザ目線 • Search Paramsの状態を保ったままリンクを共有可能 開発者目線 • JSON-Firstで複雑な構造が扱える上、Validationが可能なため、 1種の状態管理として採用することができる なぜSearch Paramsで状態管理する？
24. TanStack Routerを採用すると 型安全で効率的にルーティングができる
25. React Routerとの比較 02 参考：https://tanstack.com/router/latest/docs/framework/react/comparison
26. TanStack Router React Router File-Based Routing ✅ ✅* Nested / Layout Routes ✅ ✅ Typesafe Routes ✅ 🛑 TypeSafe Search Params (Validation) ✅ 🛑 Router Loaders ✅ ✅ Full-Stack API 🛑 ✅ * React RouterのドキュメントはCode Basedを前提にしている
27. TanStack Router React Router File-Based Routing ✅ ✅ Nested / Layout Routes ✅ ✅ Typesafe Routes ✅ 🛑 TypeSafe Search Params (Validation) ✅ 🛑 Router Loaders ✅ ✅ Full-Stack API 🛑 ✅ 大きな違い
28. React RouterのData Flow 参考：https://remix.run/blog/remix-data-flow
29. React RouterのCode React Routerにあって、TanStack Routerにないもの ActionsとForm APIの存在 Mutationは TanStack Routerの 責務ではない
30. TanStack RouterのData Flow
31. TanStack Routerだけでは Full-Stackにアプリケーションを 実装するのに不十分
32. そこで、TanStack Queryの出番！
33. TanStack Queryについて 03
34. TanStack Queryの基本
35. useQuery • queryFnに登録したfetcher関数をレンダリング時に実行 • 取得したデータをqueryKeyをkeyにしてキャッシュ
36. useMutation • mutationFnに登録したactionをイ ベントをトリガーに発火 • （データを最新にしたい場合は） invalidateQueriesで 更新したいキャッシュのqueryKey を指定 ⇨ 最新のデータに更新
37. TanStack Queryを採用すると サーバデータを効率的に管理できる
38. useQueryでデータ取得する課題 • dataがundefinedの可能性がある • 同一コンポーネント内で success, error, pending状態 の処理を実装
39. useSuspenseQueryを使うと Success状態 Error, Pending状態
40. useSuspenseQueryを使うと Success状態 Error, Pending状態 • dataのundefinedを考慮しなくていい • ErrorとPendingの処理を外に切り出せる
41. TanStack Routerと TanStack Queryを組み合わせる！
42. Suspenseも活用して実装をしたい！
43. ですが、TanStack RouterとuseSuspenseQueryを 組み合わせる際には注意が必要
44. Request Waterfallを防ぐ設計 04
45. 例）2つのSuspense境界が存在する画面 一覧 詳細 （useSuspenseQuery） （useSuspenseQuery）
46. 手元で実践
47. What is Request Waterfall??? 理想
48. useSuspenseQueryでデータ取得する場合 コンポーネントがレンダリングされる タイミングでデータ取得が開始され る ⇨ネストした子コンポーネントは親 のレンダリングが完了するまでデー タ取得が開始されない
49. fetch-on-render 一覧 詳細 1. |> getPostList() 2. |> getPostDetailById() Componentがレンダリングされる タイミングでfetchが開始する
50. TanStack Routerのloaderでデータ取得する場合 コンポーネントがレンダリングされる タイミングではすでにデータが用意 されている ⇨サーバデータのキャッシュを TanStack Queryで管理
51. render-as-you-fetch 一覧 詳細 1. |> getPostList() 1. |> getPostDetailById() Componentのレンダリングとは別に TanStack RouterのLoaderで まとめてfetchするため、 データ取得が並行で実行される
52. Request Waterfallを解消 実現！
53. Summary 05
54. 1. TanStack Routerで効率的なルーティングが実現できる 2. TanStack Routerだけではサーバデータの状態を管理するのに不 十分なため、TanStack Queryと組み合わせる 3. Suspenseを活用する際にはTanStack RouterのLoaderで データ取得を行いRequest Waterfall問題に対応する
55. ご清聴ありがとうございました！ https://twitter.com/ytaisei_ https://zenn.dev/taisei_13046