TanStack Router SPA開発の選択肢になるか（+TanStack Query）

2024/02/16 React LT会の登壇にて使用したスライド。

https://meteor-fan.connpass.com/event/307383/

資料に関係する記事

https://zenn.dev/aishift/articles/ad1744836509dd

Transcript

1. TanStack Router CyberAgent( AIShift ) yasui taisei SPA開発の選択肢になるか （+TanStack Query）
2. ytaisei 安井大晟 l 24卒フロントエンド l CyberAgent入社予定 l 株式会社AI Shift l 新規開発で奮闘中
3. 01 TanStack Query Suspense TanStack Router とは 02 03 強みを活かすための ディレクトリ設計
4. “Next.jsのApp Routerや RemixのようにFile-Basedな ルーティングはしたいが、 フレームワークの採用は too muchに感じる...” （特にtoB、SaaS形態の事業では）
5. Reactの技術選定において、 ルーティングとデータ取得は特に重要！！！
6. TanStack RouterとTanStack Queryは SPA開発の有力候補になりうる！ Reactの技術選定において、 ルーティングとデータ取得は特に重要！！！
7. TanStack Router とは 01
8. TanStack Router is now v1
9. TanStack Router is now v1 l Fully Type Safe l Built-in Loader Caching l URL State Management
10. Fully Type Safe
11. メリット① 型安全なルーティングで DX（開発体験）が向上
12. File-Based Routing
13. File-Based Routing • $token（ex. $postId） ⇨ URL pathnameとして使用 • _ prefix ⇨ レイアウトルートとして使用 • _ suffix ⇨親ルートからのネストを回避
14. File-Based Routing
15. File-Based Routing 各ルートごとで - component ⇨ successの場合, - errorComponent ⇨ errorがthrowされた場合, - pendingComponent ⇨ Promiseが返却された場合 を設定することができる
16. メリット② File-Basedなアプローチで コードによるルーティング の実装が不要
17. Data Loading（& Caching）
18. Data Loading（& Caching） • Dependency-based SWR Caching ⇨ルートのパス名 + loaderDeps • staleTime + gcTimeでキャッシュ制御
19. メリット③ SWR Cachingによる 柔軟なキャッシュ でUXを改善
20. URL State Management Search Paramsの 型定義とValidationが可能
21. URL State Management Json-FirstなSearch Params
22. メリット④ 型安全でJson-Firstな Search Params でState管理
23. Code Splitting posts.tsx posts.lazy.tsx
24. Code Splitting posts.tsx posts.lazy.tsx Critical Routeの対象 Lazy Routeの対象
25. メリット⑤ ルート単位のCode Splitting でバンドルサイズを軽減
26. TanStack Query Suspense 02
27. Supsense Queryを使わないケース
28. Supsense Queryを使わないケース 同一コンポーネント内で success, error, pending 時の処理を実装 当然dataがundefinedになる 可能性もあった
29. Supsense Queryを使うと！ error, pending success
30. Supsense Queryを使うと！ error, pending success error, pendingの状態を外に切り出せる dataがundefinedな状態を考慮する必要がなくなる
31. TanStack Routerの File-Basedなアプローチと相性がいい！！ 先ほどのスライド ⇨
32. 強みを活かすための ディレクトリ設計 03
34. 特徴① Feature-Basedな ディレクトリ設計ができる
35. • Feature-Basedなディレクトリ構成 • 各ルートにui, api, type, function のファイルを配置
36. 特徴② ルートの境界が Suspenseの境界になる
37. 例えば右のような画面の場合
38. 赤枠・青枠がそれぞれSuspenseの境界になり、 pending or error時の責務が明確になる
39. TanStack Routerのルートの境界が TanStack Queryのerror, pending状態の ハンドリングとしても機能する
40. TanStack RouterのFiled-Basedなルーティングと TanStack QueryのSuspense機能で 1. 型安全で圧倒的なDX（開発体験） 2. パフォーマンスの最適化 3. Feature-BasedでSuspenseを活用した設計 Summary
41. 今回の内容に関する記事
42. AI ShiftのZennも よろしくお願いします！
43. Thank you for listening.