TanStack Start エコシステムの現在地 / TanStack Start Ecosystem 2026

Transcript

1. TanStack Start を取り巻く エコシステムの現在地 #Offers_DeepDive Apr 9 Pluralworks LLC / Takahiro Ikeuchi Pluralworks LLC / Takahiro Ikeuchi
2. 自己紹介 Photo 池内 孝啓 / Takahiro Ikeuchi 合同会社プルーラルワークス 代表 Interim CTO / AIプロダクト開発支援 / AIネイティブ自社プロダクト開発 X: @iktakahiro 「エンジニアリングを専門性として、ユーザー課題と事業課題を同時に解決する」 ことを一貫したテーマに、技術・プロダクト・組織の3つの軸で価値を出すことが強みです。 2011 株式会社ALBERT入社。2015年に執行役員として東証マザーズへのIPOを経験。 2015 起業したスタートアップのCEOに就任。B2B SaaSのプロダクトを複数開発。 2019 株式会社Awarefy 取締役CTOに就任。AIメンタルパートナー「アウェアファイ」を開発・運営。2020年5月にプロダクトをローンチ。 2026 合同会社プルーラルワークス 代表に就任（現職）。
3. スキル・技術領域 言語・FW Go（10y〜） Python（10y〜） TypeScript（10y〜） React（10y〜） TanStack Start Next.js Flutter（5y〜） インフラ・クラウド AWS（10y〜） GCP（5y〜） Cloudflare（5y〜） DB・データ基盤 PostgreSQL（10y〜） MySQL（5y〜） Redshift（5y〜） Snowflake（5y〜） AI / ML LLM連携（OpenAI / Anthropic） RAG / エージェント設計（2y〜） AIツール Codex / Claude Code / Cursor Google Stitch / v0 / Devin Figma Make ほか アーキテクチャ クリーンアーキテクチャ オニオンアーキテクチャ ドメイン駆動設計（DDD）
5. 問い TanStack Start はプロダクション用途に採用できるのだろうか？ 答え 採用できる。
6. なぜ我々は Next.js を選ぶのか？ Next.js が採用される理由は「事例の多さ」と「エコシステムの広さ」 01 安心感 Vercel を中心とするプラットフォーム・エコシステムに 「取り敢えず載っておけばOK」という安心感 02 カバー範囲の広さ CSR・SSR・SSG すべてに対応できる 幅広いレンダリング戦略のサポート
7. 我々に本当に必要なもの 型安全性 ファイルベース ルーティング React CSR SSR SSG （必要な場合のみ）
8. これ全部 TanStack Start でできます
9. 採用事例 アウェアファイ Web アプリ（前職・2024年） ・Next.js で実装済みの Web アプリ全体を刷新するタイミングで技術選定を実施 ・Next.js 固有の機能が不要であることを確認、SolidJS を含めた選択肢を広く検討した結果、TanStack Start を採用 ・https://www.awarefy.com/ クロノック Web アプリ（現職・2025年） • 「AI コーディングを前提とした時代」の技術選定をゼロから実施、TanStack Start を採用 • https://www.chronock.ai/ クロノック技術スタック TanStack Start Cloudflare Workers Bun + ConnectRPC Render Supabase / Drizzle Better Auth ParaglideJS
10. TanStack Router ではなく Start が必要な理由 => SSR の利用 01 レイアウトシフト防止 i18n 多言語対応やダークモード/ライトモード切り替えにおける レイアウトシフトや画面構成要素のちらつきを防ぐ 02 初期データのフェッチ サーバー側で初期データを取得しクライアントへ渡すことで 表示速度と UX を向上させる 03 クローラー向け対応 OG Image など SEO・SNS シェアに必要な メタ情報をサーバーサイドで生成する
11. SSR 例 1）ロケール情報の事前取得 beforeLoad でサーバーサイドにて Cookie / Accept-Language からロケールを取得し、コンテキストへ注入 // src/routes/__root.tsx export const Route = createRootRoute({ beforeLoad: async () => { const locale = await getLocale() // Cookie → Accept-Language → fallback return { locale } }, component: RootComponent, }) beforeLoad はサーバーサイドで実行される。ロケール情報をルートコンテキストに持たせることでレイアウトシフト を防止できる。
12. SSR 例 2）ミドルウェアによる認証ガード createMiddleware().server() でサーバー側の認証チェックを行い、未認証時はリダイレクト // src/middleware/auth-middleware.ts const authMiddleware = createMiddleware().server(async ({ next }) => { const session = await auth.getSession(getRequestHeaders()) if (!session.data) throw redirect({ to: '/login' }) return next({ context: { session: session.data } }) }) // ルートに適用 export const Route = createFileRoute('/_shell')({ middleware: () => [authMiddleware], })
13. TanStack Start の現在地 Status RC v1.167.16 Stars 14.1k ※ TanStack Router と共用リポジトリ Next.js は 139K Stars (!)
14. TanStack シリーズとは TanStack Query TanStack Table TanStack Form TanStack Store TanStack Pacer TanStack AI (New) Framework Agnostic という思想 APIの使いやすさや型安全性への強い配慮、React 以外でも使える疎結合な設計が支持を集める理由。 TanStack Start / Router も同じ思想で、SolidJS もサポートしている。
15. TanStack Start は既に市民権（？）を得ている CF Cloudflare Workers 公式デプロイターゲットとしてサポート済み NT Netlify 公式ホスティングパートナー （Vercel でも動作します） DOC 主要ツールが公式ドキュメントに掲載 shadcn/ui、Clerk、Better Auth、Sentry、Better Stack など BTS Better T-Stack に掲載 https://www.better-t-stack.dev/
16. TanStack Start の強み 01 Vercel 非依存 Cloudflare Workers、Netlify、Render など どこへでもデプロイできる柔軟性 02 型安全・コンパクトな実現 型安全性・ファイルベースルーティング・CSR/SSR など 本当に欲しかったものをシンプルに実現 03 Static Prerendering 搭載済み（= SSG 相当） 当初非搭載だった SSG は Static Prerendering として実装済み。 ビルド時に静的 HTML を出力する SSG 相当の機能。 https://tanstack.com/start/latest/docs/framework/react/guide/static-prerendering
17. TanStack Builder の紹介 https://tanstack.com/builder TanStack Router / Start でプロジェクトをすぐ始めるため のスターターキット。 選べるオプション： ・ フレームワーク（React / Solid） ・ デプロイ先（Cloudflare / Netlify など） ・ 認証（Better Auth / Clerk など） ・ スタイリング（Tailwind / shadcn など） ・ DB / ORM（Drizzle / Prisma など） インタラクティブにオプションを選択してコマンドを生成。 tanstack.com/builder ← スクリーンショット を差し替えてください
18. Next.js を選ぶべき場合 ✓ バックエンドを用意せずフルスタック・フロントエンド構成をとりたい場合 ✓ Vercel エコシステムをフル活用したい場合 そして、ディスカッションへ… みなさんの TanStack Start 体験談・疑問・懸念点を聞かせてください Pluralworks LLC / Takahiro Ikeuchi