実践 TanStack Start 新規プロダクトを開発して確⽴した サーバーとクライアント 境界の設計パターン TSKaigi 2026 

名前: Shimmy（Twitter: @naoya7076） 所属: 株式会社カミナシ ○ 新規プロダクトを開発中（B to B SaaS） ○ プロトタイプでの検証時にTanStack Startを利⽤ ○ 過去にもTanStack関連で登壇 ⾃⼰紹介 

TanStack Start のスタンス Next.js は "Convention"(規約) TanStack Start は "Explicit"(明⽰) ● "no framework magic layer between you and React" ● loader / Server Functions の責務もフレームワークが決め ない ● → ⾃分たちで境界を考える必要がある 

結論: 境界は薄く、ロジックは外へ loader: クライアントがサーバーから データを受け取る 境界 Server Function: クライアントがサーバーに 処理を頼む 境界 

loader 

loader とは何か ルートを描画する「前」に⾛る処理を書く場所 

アンチパターン 全データを詰める 

どうすると良いか loader は薄く。データ取得はコンポーネントで 

Server Function 

Server Function とは何か クライアントから型安全に呼べる、サーバーで 実⾏される関数（RPC） 

アンチパターン 何でも詰める 

Middleware に横断関⼼事を逃がす 横断関⼼事を handler から消す 

委譲するだけ 直接ロジックや I/O の詳細を書かない 

まとめ 

境界は薄く、ロジックは外へ ● loader / Server Functions = 境界 ● ロジックは外側の箱へ 

株式会社カミナシ https://kaminashi.jp