先取りTanStack Start
TanStackのリポジトリを読んでいたらTanStack Startのドキュメントの最初のバージョンがpushされたようなのでチェックします。
TanStack Startとは
TanStack Startは、TanStack Routerをベースにしたメタフレームワークとかフルスッタックフレームワークとか分類されるものです。
サーバーレンダリングされたReactアプリケーションを構築できて、TanStack Router、Nitro（サーバー用）、Vite（開発用）の上に構築されています。
Solid Startと同じくVinxiを基盤に開発されています。
ニーズとしてはクライアントサイドにRouterを使っているアプリケーションでサーバーサイドレンダリング（SSR）も必要になったタイミングで導入します。
サンプルアプリケーションはRouterとFormのリポジトリにあります。以下をブラウザで動作を確認できます。
ただ各API使い方はFormリポジトリ内ののサンプルのがわかりやすいです。以下にあります
Routerのユーザーなら想像に難しくなくサーバー用のエントリポイントのファイルがビルドに一個増えただけです（はじめ方は前述のドキュメントを参照）。
現在、tanstack.comでも使用されておりドッグフーディングされてます。これのデプロイ先はVercelです（なのでNode.jsの環境で動いているのだと思われる）。
実装は現在Routerのリポジトリ内に存在しており、packages/start/以下で確認できます。
Vinxiについて
Vinxiは「メタ・ルーター」または「ルーター・マネージャー」であり、サーバーとクライアントのルーターを一元的な設定でまとめることができます。
Vite（開発サーバーとバンドル）とNitro（HTTPサーバー）の上に構築されており、SolidStartコミッタのNikhil Sarafによって作られました。
これを使って好みのパーツ同士で独自のウェブフレームワークが作れるというクラフトマンシップに基づいたツールだと私は受け取りました。
TanStack StartではViteの代わりに使用でき、先のサンプルどうり、app.config.tsファイルを用意してvinxi startでサーバーを起動します。
Server Functionsについて
createServerFnという関数に処理を渡すことでServer Functionsを定義できます。
RemixとNext.jsのAction/Server Actionsに相当し、必ずサーバーで実行されます。
内部実装的にはVite PluginがこのアノテーションがついたコードをBabelでトランスパイルします。
TanStack Formのサンプルでは、フォームの送信先をAPIではなくこのラップしたコードにしています。HTMLネイティブフォームのactionに.urlを文字列として与えることが可能です。
ハイドレーション
<StartClient>というコンポーネントを使用します。
サーバーサイドのエントリーポイントでcreateStartHandler を通して事前に生成されたroutes定義をSSRで配信し、クライアントサイドでも同じ定義を読み込んでhydrateRoot()できるという魔法のような仕組みがあります。
Loader
Route.useLoaderData()を使用することで、クラサバ両方でデータ読み込みを解決できます（Remixのloaderに相当）。
前述のcreateServerFnで定義した読み込みクエリをRouteに設定しておきます。
Discussion