Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TanStack Routerで型安全かつ効率的なルーティングを実現

TanStack Routerで型安全かつ効率的なルーティングを実現

TSKaigiにて使用した資料です。

https://tskaigi.org/talks/ytaisei_

Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。
しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。

私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。

今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。

次の特徴を紹介します。

- 型安全でシンプルなルーティング
- File-Basedなルート生成
- バンドルサイズを軽減するCode Splitting
- Search Paramsによる状態管理

ytaisei

May 04, 2024
Tweet

More Decks by ytaisei

Other Decks in Technology

Transcript

  1. Vite+Reactなら • React Router • TanStack Router Frameworkを使うなら • Next.js

    • Remix • Remix SPA Mode 今回紹介するのが 選択肢を増やしたい!
  2. Search Params による状態管理 型安全で シンプルな ルーティング 02 File-Basedな ルート生成 01

    バンドルサイズを 軽減する Code Splitting 03 04 紹介する4つの特徴
  3. TanStack Router’s Summary • 高いDX(Developer Experience)に配慮 ◦ 型安全性 ◦ File-Based

    Routing ◦ Code Splitting • Search Paramsで型安全な状態管理 ◦ ユーザ体験・DX向上