Tanstack Startを触ってみての感動

by OPTiM

Embed

Start on current slide

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© 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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© 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）今回紹介しきれないですが、多機能で便利すぎる・・・

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© 2019-2026 OPTiM Corp. All rights reserved. 12 Server Function(SF)が最高！ / 特徴  createServerFnという専用関数で定義 ◼serverで動く関数だとわかる  普通の関数と同じ手軽さ ◼“use server”のようなディレクティブは不要  何が書いてあり何がおきるのか予想しやすい ◼バックエンドのコードっぽい？

Slide 13

Slide 13 text

© 2019-2026 OPTiM Corp. All rights reserved. 13 Server Function(SF)が最高！ / 嬉しいポイント  middlewareで本処理の前に別の処理を挟める  スキーマライブラリと統合して明示的にリクエストの検証ができる ◼validatorがない=検証漏れだとわかる  型安全 ◼handlerの引数であるcontext(middlewareの戻り値)やdata(リクエスト)は推論により型安全（validatorを書かないとdataはundefined になる）

Slide 14

Slide 14 text

© 2019-2026 OPTiM Corp. All rights reserved. 14 Server Function(SF)が最高！ / ハンドリング  middlewareやvalidatorでエラーの場合はクライアント側のcatchで補足される  postが成功した場合はnavigateで遷移  補足 ◼更新して再取得する系はrouter.invalidate()をクライアントから呼ぶ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2019-2026 OPTiM Corp. All rights reserved. 16 Server Componentsがおもしろい！（実験的機能）  デフォルトがクライアントコンポーネントなのでSCのためのAPIを使う必要がある(後述)  SCはcreateServerFnで取得して変数に入れて扱うデータ的な存在  SCを扱うための複雑なルールはなく既存のデータfetchの世界観で扱える  renderServerComponentを一緒に使う ◼ここが先ほど解説したSFとの唯一の差分 ◼SCを使うために必要なAPI  Server Functionの戻り値 ◼renderServerComponentの戻り値を返すだけ

Slide 17

Slide 17 text

© 2019-2026 OPTiM Corp. All rights reserved. 17 Server Componentsがおもしろい！（実験的機能）  Loaderはページ表示時に必要なGET処理をする場所とイメージすればOK  SCは、表示に必要なデータなのでloader で取得  useLoaderData()をつかうことでloader の結果を取得できる  あとはjsxの中で展開するだけ ◼取得したデータを表示するのと同じように扱える ◼server functionの仕組みの上に載っているだけで特殊な書き方を覚える必要なし

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 2019-2026 OPTiM Corp. All rights reserved. 19 他にも便利機能がたくさんあります！  createFileRouteでssr:falseするだけでclientでのみ動くページになる  useHydrated Hookでハイドレーション状態を追跡できる ◼ハイドレーションエラーの回避のためにコンポーネントを分けたりする必要がなくなる  Awaitコンポーネントによる遅延データのストリーミング ◼重い処理のfallbackを表示しつつ、早く来たものを先に表示する  Hydrateによる遅延ハイドレーション ◼画面に表示されたらハイドレーションを実行するみたいなことができる

Slide 20

Slide 20 text

© 2019-2026 OPTiM Corp. All rights reserved. 20 まとめ  Next.js一強感あったけど、Startもめっちゃ良い！  StartのTutorialをやってGuideページを上から読めばすぐに始められる  Tanstack Routerが9割+Startが1割の構成なので2つのドキュメントを行き来することになるのはちょっと大変かも（Router使いであれば学習コストが極小）  Next.jsと比較して学習コストはStartのほうが低いかも？

Slide 21

Slide 21 text

© 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