😎

先取りTanStack Start

2024/07/09に公開

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は「メタ・ルーター」または「ルーター・マネージャー」であり、サーバーとクライアントのルーターを一元的な設定でまとめることができます。

Vite（開発サーバーとバンドル）とNitro（HTTPサーバー）の上に構築されており、SolidStartコミッタのNikhil Sarafによって作られました。

これを使って好みのパーツ同士で独自のウェブフレームワークが作れるというクラフトマンシップに基づいたツールだと私は受け取りました。

TanStack StartではViteの代わりに使用でき、先のサンプルどうり、app.config.tsファイルを用意してvinxi startでサーバーを起動します。

createServerFnという関数に処理を渡すことでServer Functionsを定義できます。

RemixとNext.jsのAction/Server Actionsに相当し、必ずサーバーで実行されます。

内部実装的にはVite PluginがこのアノテーションがついたコードをBabelでトランスパイルします。

TanStack Formのサンプルでは、フォームの送信先をAPIではなくこのラップしたコードにしています。HTMLネイティブフォームのactionに.urlを文字列として与えることが可能です。

<StartClient>というコンポーネントを使用します。

サーバーサイドのエントリーポイントでcreateStartHandler を通して事前に生成されたroutes定義をSSRで配信し、クライアントサイドでも同じ定義を読み込んでhydrateRoot()できるという魔法のような仕組みがあります。

Route.useLoaderData()を使用することで、クラサバ両方でデータ読み込みを解決できます（Remixのloaderに相当）。

前述のcreateServerFnで定義した読み込みクエリをRouteに設定しておきます。