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

Slide 1

Slide 1 text

TanStack Router CyberAgent( AIShift ) yasui taisei SPA開発の選択肢になるか（+TanStack Query）

Slide 2

Slide 2 text

ytaisei 安井大晟 l 24卒フロントエンド l CyberAgent入社予定 l 株式会社AI Shift l 新規開発で奮闘中

Slide 3

Slide 3 text

01 TanStack Query Suspense TanStack Router とは 02 03 強みを活かすためのディレクトリ設計

Slide 4

Slide 4 text

“Next.jsのApp Routerや RemixのようにFile-Basedなルーティングはしたいが、フレームワークの採用は too muchに感じる...” （特にtoB、SaaS形態の事業では）

Slide 5

Slide 5 text

Reactの技術選定において、ルーティングとデータ取得は特に重要！！！

Slide 6

Slide 6 text

TanStack RouterとTanStack Queryは SPA開発の有力候補になりうる！ Reactの技術選定において、ルーティングとデータ取得は特に重要！！！

Slide 7

Slide 7 text

TanStack Router とは 01

Slide 8

Slide 8 text

TanStack Router is now v1

Slide 9

Slide 9 text

TanStack Router is now v1 l Fully Type Safe l Built-in Loader Caching l URL State Management

Slide 10

Slide 10 text

Fully Type Safe

Slide 11

Slide 11 text

メリット① 型安全なルーティングで DX（開発体験）が向上

Slide 12

Slide 12 text

File-Based Routing

Slide 13

Slide 13 text

File-Based Routing • $token（ex. $postId） ⇨ URL pathnameとして使用 • _ prefix ⇨ レイアウトルートとして使用 • _ suffix ⇨親ルートからのネストを回避

Slide 14

Slide 14 text

File-Based Routing

Slide 15

Slide 15 text

File-Based Routing 各ルートごとで - component ⇨ successの場合, - errorComponent ⇨ errorがthrowされた場合, - pendingComponent ⇨ Promiseが返却された場合を設定することができる

Slide 16

Slide 16 text

メリット② File-Basedなアプローチでコードによるルーティングの実装が不要

Slide 17

Slide 17 text

Data Loading（& Caching）

Slide 18

Slide 18 text

Data Loading（& Caching） • Dependency-based SWR Caching ⇨ルートのパス名 + loaderDeps • staleTime + gcTimeでキャッシュ制御

Slide 19

Slide 19 text

メリット③ SWR Cachingによる柔軟なキャッシュでUXを改善

Slide 20

Slide 20 text

URL State Management Search Paramsの型定義とValidationが可能

Slide 21

Slide 21 text

URL State Management Json-FirstなSearch Params

Slide 22

Slide 22 text

メリット④ 型安全でJson-Firstな Search Params でState管理

Slide 23

Slide 23 text

Code Splitting posts.tsx posts.lazy.tsx

Slide 24

Slide 24 text

Code Splitting posts.tsx posts.lazy.tsx Critical Routeの対象 Lazy Routeの対象

Slide 25

Slide 25 text

メリット⑤ ルート単位のCode Splitting でバンドルサイズを軽減

Slide 26

Slide 26 text

TanStack Query Suspense 02

Slide 27

Slide 27 text

Supsense Queryを使わないケース

Slide 28

Slide 28 text

Supsense Queryを使わないケース同一コンポーネント内で success, error, pending 時の処理を実装当然dataがundefinedになる可能性もあった

Slide 29

Slide 29 text

Supsense Queryを使うと！ error, pending success

Slide 30

Slide 30 text

Supsense Queryを使うと！ error, pending success error, pendingの状態を外に切り出せる dataがundefinedな状態を考慮する必要がなくなる

Slide 31

Slide 31 text

TanStack Routerの File-Basedなアプローチと相性がいい！！先ほどのスライド ⇨

Slide 32

Slide 32 text

強みを活かすためのディレクトリ設計 03

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

特徴① Feature-Basedなディレクトリ設計ができる

Slide 35

Slide 35 text

• Feature-Basedなディレクトリ構成 • 各ルートにui, api, type, function のファイルを配置

Slide 36

Slide 36 text

特徴② ルートの境界が Suspenseの境界になる

Slide 37

Slide 37 text

例えば右のような画面の場合

Slide 38

Slide 38 text

赤枠・青枠がそれぞれSuspenseの境界になり、 pending or error時の責務が明確になる

Slide 39

Slide 39 text

TanStack Routerのルートの境界が TanStack Queryのerror, pending状態のハンドリングとしても機能する

Slide 40

Slide 40 text

TanStack RouterのFiled-Basedなルーティングと TanStack QueryのSuspense機能で 1. 型安全で圧倒的なDX（開発体験） 2. パフォーマンスの最適化 3. Feature-BasedでSuspenseを活用した設計 Summary