TanStack Start

TanStack Start (Vite ベース) を採用した型志向のフルスタック React テンプレートです。ファイルベースルーティングは @tanstack/react-router で配線され、ソースはフレームワーク慣習に従って src/ 配下に置かれます。TanStack Start は独自のデータフロー原子を持つため、Validation library 選択コンボは非表示になります。

生成されるレイアウト

src/
├── router.tsx
├── routes/
│   ├── __root.tsx
│   └── index.tsx
├── components/
│   └── Greeting.res
├── server/
│   └── Greet.res
└── __tests__/
    └── Greeting.test.mjs
vite.config.ts
tsconfig.json
rescript.json
package.json

主なファイル

  • src/routes/__root.tsx — ルートレイアウト。<html> / <body> をラップし、<Outlet /> をレンダリングします。

  • src/routes/index.tsx — createFileRoute を使ったホームルート (/)。Loader が Greet.greet で挨拶を返し、ボタン押下時には新しい値で再レンダリングされます。

  • src/components/Greeting.res — ホームルートから Greeting.res.mjs 経由で参照される ReScript 製 React コンポーネント。

  • src/server/Greet.res — @tanstack/react-start の createServerFn でバインドされた Server Function サンプル。

  • vite.config.ts — @tanstack/router-plugin (ルートツリー生成)、@tanstack/react-start/plugin/vite (SSR パイプライン)、@vitejs/plugin-react (Fast Refresh) を配線します。

npm スクリプト

コマンド

説明

dev

rescript -w と並行して Vite 開発サーバーを起動します。

build

ReScript をコンパイルしてから vite build を実行します。

start

.output/ 配下の本番サーバーバンドルを起動します。

test

Vitest を実行します。

Day-two ポインタ

  • ルート追加 — src/routes/ 配下に新しい .tsx を置けば、router プラグインが src/routeTree.gen.ts を自動再生成します。

  • Server Function 追加 — src/server/ 配下で createServerFn(...) のサンクを追加で定義し、任意のルートやコンポーネントから import します。

  • Validation を追加 — このテンプレートでは Wizard が zod/sury 選択をスキップします。好みの validator を別途インストールし、Server Function ハンドラ内で呼び出してください。