Next.jsでReactアプリを開発していて、型安全性の甘さやVercelへの依存に不満を感じたことはないでしょうか。TanStack Startは、そうした課題を正面から解決するために設計されたフルスタックReactフレームワークです。現在RC（リリース候補）段階にあり、v1.0の正式リリースが目前に迫っています。

この記事でわかること

  • TanStack Startの概要と設計思想
  • Next.jsとの具体的な違い
  • 主な機能と開発体験
  • どんなプロジェクトに向いているか

TanStack Startとは

https://tanstack.com/start/latest

TanStack Startは、TanStack Routerを基盤にしたフルスタックReactフレームワークです。ビルドツールにViteを採用し、SSR、ストリーミング、サーバー関数、バンドルまでをカバーします。作者はTanStack QueryやTanStack Tableで知られるTanner Linsley氏。TanStack LLCが運営する100%ブートストラップのプロジェクトで、ベンチャー資金は入っていません。

2025年9月にv1.0 RCが公開され、機能面は完成済みです。APIも安定しており、v1.0までに大きな変更は予定されていません。

Next.jsユーザーが抱える課題

Next.jsは本番実績が豊富なフレームワークですが、開発者コミュニティからはいくつかの不満が上がっています。

1つ目は、Server Componentsがデフォルトである点です。すべてのコンポーネントがServer Componentとして扱われ、状態管理やイベントハンドラを使うには”use client”ディレクティブを毎回書く必要があります。インタラクティブな画面が多いアプリでは、この作業が負担になります。

2つ目は、キャッシュの複雑さです。リクエストメモ化、データキャッシュ、ルートキャッシュ、ルーターキャッシュと複数のレイヤーがあり、それぞれ無効化の仕組みが異なります。この挙動は過去に何度も変更され、予測しづらいという声が開発者コミュニティで根強く残っています。

3つ目は、デプロイ先の偏りです。Next.jsはVercelのインフラで最も高いパフォーマンスを発揮するよう最適化されており、他のホスティング環境ではセットアップに追加の手間がかかる場合があります。

TanStack Startの主な特徴

エンドツーエンドの型安全性

TanStack Startの最大の強みは、ルーティングからサーバー関数まで一貫した型安全性です。ルートパス、パスパラメータ、検索パラメータ、ローダーのデータがすべてコンパイル時に型チェックされます。Next.jsのApp Routerではパスパラメータがstring | string[]として扱われますが、TanStack Routerではバリデーション付きの型推論が効きます。リンク先の誤りもコンパイルエラーで検出できるため、本番環境でのリンク切れを防げます。

Viteベースの高速な開発体験

ビルドツールにViteを採用しているため、開発サーバーの起動が速く、HMR（ホットモジュールリプレースメント）も高速です。CPU・メモリの消費も軽量で、大規模プロジェクトでも快適に動作します。Next.jsのWebpack/Turbopackと比べて開発中のストレスが少ないという評価が多く見られます。

Selective SSR

ルートごとにSSRの挙動を細かく制御できます。フルSSR、データのみ取得（SPA的な動作）、完全なクライアントレンダリングをルート単位で切り替え可能です。Next.jsでは同等のことを実現するにはカスタム実装が必要になります。

サーバー関数

createServerFnで作成するサーバー関数は、クライアントから通常の関数のように呼び出せます。ランタイムがRPCブリッジを自動処理し、GETとPOSTの両方に対応します。入力バリデーションが組み込まれており、クライアント側・サーバー側の両方でミドルウェアを適用できます。Next.jsのServer Actionsにはクライアントミドルウェアがなく、入力バリデーションも手動です。

デプロイ先の自由度

ViteとNitroの上に構築されているため、Vercel、Netlify、Cloudflare Workers、AWS Lambda、標準のNode.jsサーバー、Deno、Bunなど、あらゆるプラットフォームにデプロイできます。特定のホスティングサービスへの最適化に依存しない設計です。

SWRキャッシュ

TanStack Router組み込みのSWR（stale-while-revalidate）キャッシュにより、ローダーデータが自動的にキャッシュ・再検証されます。staleTimeとgcTimeをルートごとに設定でき、TanStack Queryとの統合もサポートされています。Next.jsの暗黙的なサーバーサイドキャッシュとは異なり、キャッシュの挙動がコード上で明示的に見えます。

Next.jsとの比較まとめ

設計思想の違いが最も重要です。Next.jsは「サーバーファースト」で、フレームワークが多くの判断を代行します。TanStack Startは「開発者ファースト」で、明示的な制御と型安全性を優先します。

開発速度の面では、Viteベースのため開発サーバー起動・HMR・ナビゲーションすべてでTanStack Startが高速です。一方、Next.jsにはReact Server Componentsの成熟したサポート、豊富なサードパーティ連携、巨大なコミュニティという強みがあります。

TanStack StartのRSCサポートは現在experimental（実験的）で、v1.xのマイナーアップデートとして追加される予定です。RSCを本格的に活用したいプロジェクトでは、現時点ではNext.jsが適しています。

どんなプロジェクトに向いているか

TanStack Startが適しているのは、インタラクティブな要素が多いアプリ、型安全性を重視するチーム、Vercel以外へのデプロイが前提のプロジェクトです。TanStack QueryやTanStack Tableなど、TanStackエコシステムを既に使っているチームにとっては移行のハードルも低くなります。

一方、コンテンツ中心のサイトやVercel上での運用が確定しているプロジェクト、RSCをフル活用したいケースではNext.jsの方が現時点では適しています。

まとめ

TanStack Startは、Next.jsとは異なるアプローチでReact開発の選択肢を広げるフレームワークです。v1.0の正式リリースを控えた今、公式ドキュメントの「Getting Started」ガイドから小さなプロジェクトで試してみると、自分のチームや開発スタイルに合うかどうかを判断しやすくなります。