tanstack-start

# TanStack Start (React) — RC-Ready Playbook

Full-stack React on TanStack Router with per-route SSR/CSR, file-based routing, server functions, and first-class Cloudflare Workers support.

## Use this skill when
- Building a greenfield React app that needs route-level SSR/CSR/SSG switches.
- Migrating from Next.js/React Router while keeping file-based routing + API routes.
- Shipping to edge runtimes (Workers) with typed server functions and bindings.
- You want predictable routing with type-safe params/search + built-in preloading.

## What’s inside
- **References**: quickstart/layout, rendering modes, server functions, Cloudflare hosting, execution/auth, plus new routing/data/navigation/devtools guides.
- **Script**: `scripts/bootstrap-cloudflare-start.sh <app>` scaffolds Start + Workers + binding types.
- **Troubleshooting**: hydration, API routing, bindings, navigation/preloading failures.

---

## Quick Start (React)
```bash
npm create @tanstack/start@latest my-app
cd my-app
npm run dev
```
Manual installs (all bundle targets are supported): add `@tanstack/react-router` + `@tanstack/react-start` with your bundler plugin (`vite`, `webpack`, or `esbuild`) per the official install guides.

### Core layout reminder
- `app/routes/**` file-based routes → router tree, automatic code-splitting + data preloading.
- `app/entry.client.tsx` hydrates `<StartClient />`; `app/entry.server.tsx` wraps `createServerEntry`.
- `app/config.ts` or `app/start.ts` sets `defaultSsr`, `spaMode`, middleware, and context.

---

## Routing + Data Best Practices

- **Type-safe params & search**: `createFileRoute()` infers path params; add `validateSearch` (zod) to parse and coerce search params.
- **Route matching order is deterministic** (index → static → dynamic → splat); rely on this when adding catch-alls.
- **Loaders run once per location change**; return plain data, throw `redirect()`/`notFound()` for control flow.
- **Data mutations**: colocate `action`/server functions; keep loaders