実践 TanStack Start ― 新規プロダクトを開発して確立した、サーバーとクライアント境界の設計パターン / Practical TanStack Start Server-Client Boundary Patterns

2026/05/22
TSKaigi 2026
https://2026.tskaigi.org/talks/26

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

Shimmy
ソフトウェアエンジニア

Transcript

1. 実践 TanStack Start 新規プロダクトを開発して確⽴した サーバーとクライアント 境界の設計パターン TSKaigi 2026
2. 名前: Shimmy（Twitter: @naoya7076） 所属: 株式会社カミナシ ◦ 新規プロダクトを開発中（B to B SaaS） ◦ プロトタイプでの検証時にTanStack Startを利⽤ ◦ 過去にもTanStack関連で登壇 ⾃⼰紹介
3. TanStack Start のスタンス Next.js は "Convention"(規約) TanStack Start は "Explicit"(明⽰) • "no framework magic layer between you and React" • loader / Server Functions の責務もフレームワークが決め ない • → ⾃分たちで境界を考える必要がある
4. 結論: 境界は薄く、ロジックは外へ loader: クライアントがサーバーから データを受け取る 境界 Server Function: クライアントがサーバーに 処理を頼む 境界
5. loader
6. loader とは何か ルートを描画する「前」に⾛る処理を書く場所
7. アンチパターン 全データを詰める
8. どうすると良いか loader は薄く。データ取得はコンポーネントで
9. Server Function
10. Server Function とは何か クライアントから型安全に呼べる、サーバーで 実⾏される関数（RPC）
11. アンチパターン 何でも詰める
12. Middleware に横断関⼼事を逃がす 横断関⼼事を handler から消す
13. 委譲するだけ 直接ロジックや I/O の詳細を書かない
14. まとめ
15. 境界は薄く、ロジックは外へ • loader / Server Functions = 境界 • ロジックは外側の箱へ
16. 株式会社カミナシ https://kaminashi.jp