Tanstack Startを触ってみての感動

2026/07/17 開催「OPTiM Frontend Meetup #1」でのオプティム 亀田の発表資料です。

https://optim.connpass.com/event/396222/

Transcript

1. © 2019-2026 OPTiM Corp. All rights reserved. © 2019-2026 OPTiM Corp. All rights reserved. Tanstack Startを 触ってみての感動 亀田 登壇日：2026/07/17
2. 2 © 2019-2026 OPTiM Corp. All rights reserved. 自己紹介 自己紹介
3. © 2019-2026 OPTiM Corp. All rights reserved. 3 自己紹介 名前 ◼亀田 趣味 ◼ 音楽 ◼ 映画 プロダクト ◼OPTiM Support & Growth Portal ◼OPTiM Hardware My Portal 技術 ◼Next.js v16.2 ◼React Hook Form v7.53, zod v4.3 ◼SWR v2.2 ◼Storybook v10.3
4. © 2019-2026 OPTiM Corp. All rights reserved. 4 今日は・・・ 「詳しい解説」ではなく Tanstack Startを触って「最高じゃん！」 と思ったことを共有します。
5. © 2019-2026 OPTiM Corp. All rights reserved. 5 目次 圧倒的! 型安全 自動生成！ Server Functionが最高！ Server Componentsがおもしろい！
6. © 2019-2026 OPTiM Corp. All rights reserved. 6 圧倒的! 型安全 ナビゲーションAPIが型安全 存在するパスが補完される Pageのタイポを検知 （/blog?q=hoge&page=1） createFileRouteでRoute Pathを 定義 スキーマライブラリで search paramsの型を定義
7. © 2019-2026 OPTiM Corp. All rights reserved. 7 圧倒的! 型安全 Linkも型安全になる path paramsの指定がないエラー 型エラー OK！
8. © 2019-2026 OPTiM Corp. All rights reserved. 8 圧倒的! 型安全 Q. 待って！さっきのcreateFileRouteってやつなに？ A. ページを定義するAPI。”/blog”ページの設定や遷移時の処理を実装できる A. 表示するコンポーネントの設定(component) B. レンダリングに必要なデータのGET処理（loader）※Fetch-then-render(Awaitという仕組みでrender-as-you-fetchできる ) C. 認証の確認など（beforeLoader） D. サーチパラムスの型定義（validateSearch） 今回紹介しきれないですが、多機能で便利すぎる・・・
9. © 2019-2026 OPTiM Corp. All rights reserved. 9 目次 圧倒的! 型安全 自動生成！ Server Functionが最高！ Server Componentsがおもしろい！
10. © 2019-2026 OPTiM Corp. All rights reserved. 10 自動生成！ Q. まだだ… createFileRoute作るの面倒すぎでは？ A. 自動生成なので面倒じゃない & タイポから解放されます！
11. © 2019-2026 OPTiM Corp. All rights reserved. 11 目次 圧倒的! 型安全 自動生成！ Server Functionが最高！ Server Componentsがおもしろい！
12. © 2019-2026 OPTiM Corp. All rights reserved. 12 Server Function(SF)が最高！ / 特徴  createServerFnという専用関数で定義 ◼serverで動く関数だとわかる  普通の関数と同じ手軽さ ◼“use server”のようなディレクティブは不要  何が書いてあり何がおきるのか予想しやすい ◼バックエンドのコードっぽい？
13. © 2019-2026 OPTiM Corp. All rights reserved. 13 Server Function(SF)が最高！ / 嬉しいポイント  middlewareで本処理の前に別の処理を挟 める  スキーマライブラリと統合して明示的にリ クエストの検証ができる ◼validatorがない=検証漏れだとわかる  型安全 ◼handlerの引数であるcontext(middlewareの 戻り値)やdata(リクエスト)は推論により型安 全（validatorを書かないとdataはundefined になる）
14. © 2019-2026 OPTiM Corp. All rights reserved. 14 Server Function(SF)が最高！ / ハンドリング  middlewareやvalidatorでエラーの場合 はクライアント側のcatchで補足される  postが成功した場合はnavigateで遷移  補足 ◼更新して再取得する系はrouter.invalidate()を クライアントから呼ぶ
15. © 2019-2026 OPTiM Corp. All rights reserved. 15 目次 圧倒的! 型安全 自動生成！ Server Functionが最高！ Server Componentsがおもしろい！
16. © 2019-2026 OPTiM Corp. All rights reserved. 16 Server Componentsがおもしろい！（実験的機能）  デフォルトがクライアントコンポーネントなの でSCのためのAPIを使う必要がある(後述)  SCはcreateServerFnで取得して変数に入れて 扱うデータ的な存在  SCを扱うための複雑なルールはなく既存のデー タfetchの世界観で扱える  renderServerComponentを一緒に使う ◼ここが先ほど解説したSFとの唯一の差分 ◼SCを使うために必要なAPI  Server Functionの戻り値 ◼renderServerComponentの戻り値を返すだけ
17. © 2019-2026 OPTiM Corp. All rights reserved. 17 Server Componentsがおもしろい！（実験的機能）  Loaderはページ表示時に必要なGET処理 をする場所とイメージすればOK  SCは、表示に必要なデータなのでloader で取得  useLoaderData()をつかうことでloader の結果を取得できる  あとはjsxの中で展開するだけ ◼取得したデータを表示するのと同じように扱 える ◼server functionの仕組みの上に載っているだ けで特殊な書き方を覚える必要なし
18. © 2019-2026 OPTiM Corp. All rights reserved. 18 Server Componentsがおもしろい！（実験的機能）  useQueryと組み合わせる公式例
19. © 2019-2026 OPTiM Corp. All rights reserved. 19 他にも便利機能がたくさんあります！  createFileRouteでssr:falseするだけでclientでのみ動くページになる  useHydrated Hookでハイドレーション状態を追跡できる ◼ハイドレーションエラーの回避のためにコンポーネントを分けたりする必要がなくなる  Awaitコンポーネントによる遅延データのストリーミング ◼重い処理のfallbackを表示しつつ、早く来たものを先に表示する  Hydrateによる遅延ハイドレーション ◼画面に表示されたらハイドレーションを実行するみたいなことができる
20. © 2019-2026 OPTiM Corp. All rights reserved. 20 まとめ  Next.js一強感あったけど、Startもめっちゃ良い！  StartのTutorialをやってGuideページを上から読めばすぐに始められる  Tanstack Routerが9割+Startが1割の構成なので2つのドキュメントを行き来すること になるのはちょっと大変かも（Router使いであれば学習コストが極小）  Next.jsと比較して学習コストはStartのほうが低いかも？
21. © 2019-2026 OPTiM Corp. All rights reserved. 21 参考  TanStack Start Overview o https://tanstack.com/start/latest/docs/framework/react/overview  Building a Full Stack DevJokes App with TanStack Start o https://tanstack.com/start/latest/docs/framework/react/tutorial/reading-writing-file  Guides o https://tanstack.com/start/latest/docs/framework/react/guide/routing  File-Based Routing o https://tanstack.com/router/latest/docs/routing/file-based-routing  React Server Components Your Way o https://tanstack.com/blog/react-server-components
22. © 2019-2026 OPTiM Corp. All rights reserved.