',\n `

${appHtml}

`,\n );\n\n return c.html(html);\n});\n\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[],[165,200],[165],{"_105":210,"_97":211,"_166":212,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":213,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_179":214,"_101":241},"3b25359a-0f87-11f1-bedc-42dde27851f2","frontend","019c82cb-5b48-76ad-b4d1-6f1d4136d5e0",["D",1771720891213],[215,222,232],{"_105":216,"_97":217,"_166":218,"_168":212,"_169":149,"_170":148,"_172":120,"_107":219,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_179":220,"_101":221},"bbd9c8ae-0f87-11f1-8f72-42dde27851f2","components","019c82ce-a6e0-774f-9873-6da360d5b3ee",["D",1771721107172],[],[211,217],{"_105":223,"_97":224,"_166":225,"_168":212,"_169":149,"_170":226,"_172":120,"_107":227,"_102":171,"_174":228,"_176":229,"_177":22,"_178":-5,"_179":230,"_101":231},"631ade1a-0f87-11f1-8b77-42dde27851f2","index.html","019c82cb-5b48-76ad-b4d1-6598c90aff42",26,["D",1771720958278],"file","\n\n \n \n \n Todo List\n \n \n \n \n \n

\n \n \n\n",[],[211,224],{"_105":233,"_97":234,"_166":235,"_168":212,"_169":149,"_170":236,"_172":120,"_107":237,"_102":171,"_174":194,"_176":238,"_177":22,"_178":-5,"_179":239,"_101":240},"69be20f6-0f87-11f1-8899-42dde27851f2","index.tsx","019c82cb-5b48-76ad-b4d1-6be7a9a368ce",27,["D",1771720969416],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n redirect,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { routes } from \"../shared/routes.ts\";\n\n// Create a browser router with a custom dataStrategy for single-fetch.\n// Instead of React Router calling each loader individually, this makes ONE\n// HTTP request per navigation with an \"X-Data-Request: true\" header.\n// The server runs all matched loaders/actions and returns their data as JSON.\nconst router = createBrowserRouter(\n routes,\n {\n // @ts-ignore - hydrationData is injected by the server\n hydrationData: window.__staticRouterHydrationData,\n\n async dataStrategy({ request, matches }) {\n const matchesToLoad = matches.filter(m => m.shouldLoad);\n if (matchesToLoad.length === 0) return {};\n\n const fetchInit: RequestInit = {\n method: request.method,\n headers: { \"X-Data-Request\": \"true\" },\n signal: request.signal,\n };\n\n // For form submissions (actions), forward the body\n if (request.method !== \"GET\") {\n fetchInit.body = await request.formData();\n }\n\n const res = await fetch(request.url, fetchInit);\n const json = await res.json();\n\n // Handle redirects from actions\n if (json.redirect) {\n const results: Record = {};\n for (const match of matchesToLoad) {\n results[match.route.id] = { type: \"data\", result: redirect(json.redirect) };\n }\n return results;\n }\n\n // Map loader/action data back to route IDs\n const results: Record = {};\n for (const match of matchesToLoad) {\n const routeId = match.route.id;\n if (json.actionData?.[routeId] != null) {\n results[routeId] = { type: \"data\", result: json.actionData[routeId] };\n } else if (json.loaderData?.[routeId] !== undefined) {\n results[routeId] = { type: \"data\", result: json.loaderData[routeId] };\n }\n }\n\n return results;\n },\n },\n);\n\n// Hydrate the server-rendered HTML\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);\n",[],[211,234],[211],{"_105":243,"_97":244,"_166":245,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":246,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_179":247,"_101":275},"3b25823e-0f87-11f1-bedc-42dde27851f2","routes","019c82cb-5b48-76ad-b4d1-9ad8b51f1d69",["D",1771720891213],[248,257,266],{"_105":249,"_97":250,"_166":251,"_168":245,"_169":149,"_170":252,"_172":120,"_107":253,"_102":33,"_174":194,"_176":254,"_177":22,"_178":-5,"_179":255,"_101":256},"4c35f036-0f87-11f1-8f72-42dde27851f2","Home.action.ts","4c35f0fe-0f87-11f1-8f72-42dde27851f2",21,["D",1771720919871],"import { ActionFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { addTodo, toggleTodo } from \"../backend/database.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n const formData = await request.formData();\n const intent = formData.get(\"intent\");\n\n if (intent === \"add\") {\n const text = formData.get(\"text\") as string;\n if (!text?.trim()) throw new Response(\"Text is required\", { status: 400 });\n await addTodo(text.trim());\n } else if (intent === \"toggle\") {\n const id = Number(formData.get(\"id\"));\n await toggleTodo(id);\n }\n\n return { ok: true };\n}\n",[],[244,250],{"_105":258,"_97":259,"_166":260,"_168":245,"_169":149,"_170":261,"_172":120,"_107":262,"_102":171,"_174":194,"_176":263,"_177":22,"_178":-5,"_179":264,"_101":265},"58b5ab94-0f87-11f1-bc98-42dde27851f2","Home.loader.ts","019c82cb-5b48-76ad-b4d1-752e1aa03394",24,["D",1771720940840],"import { getAllTodos } from \"../backend/database.ts\";\n\nexport async function loader() {\n return { todos: await getAllTodos() };\n}\n",[],[244,259],{"_105":267,"_97":268,"_166":269,"_168":245,"_169":149,"_170":270,"_172":120,"_107":271,"_102":171,"_174":194,"_176":272,"_177":22,"_178":-5,"_179":273,"_101":274},"58167182-0f87-11f1-bc98-42dde27851f2","Home.tsx","019c82cb-5b48-76ad-b4d1-78f8aedb7c40",23,["D",1771720939795],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n useLoaderData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../backend/database.ts\";\n\nexport function Home() {\n const { todos } = useLoaderData<{ todos: Todo[] }>();\n const navigation = useNavigation();\n const isAdding = navigation.state === \"submitting\"\n && navigation.formData?.get(\"intent\") === \"add\";\n const $form = React.useRef(null);\n\n // Reset the form after a successful submission\n React.useEffect(() => {\n if (navigation.state === \"idle\") $form.current?.reset();\n }, [navigation.state]);\n\n return (\n

Todo List

\n\n {/* Add todo form */}\n

\n );\n}\n",[],[244,268],[244],{"_105":277,"_97":278,"_166":279,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":280,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_179":281,"_101":291},"3b259436-0f87-11f1-bedc-42dde27851f2","shared","019c82cb-5b48-76ad-b4d1-a699e13e3a83",["D",1771720891213],[282],{"_105":283,"_97":284,"_166":285,"_168":279,"_169":149,"_170":286,"_172":120,"_107":287,"_102":171,"_174":194,"_176":288,"_177":22,"_178":-5,"_179":289,"_101":290},"51cae6fa-0f87-11f1-bc98-42dde27851f2","routes.ts","019c82cb-5b48-76ad-b4d1-9c36ca4f91ea",22,["D",1771720929235],"import {\n type ActionFunctionArgs,\n type LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Home } from \"../routes/Home.tsx\";\n\nlet isServer = typeof document === \"undefined\";\n\n// On the server, dynamically import the real loader/action function.\n// On the client, return a no-op stub. The stub's presence tells React Router\n// this route needs data, but the client's dataStrategy handles the actual\n// fetching via a single HTTP request to the server.\nfunction serverLoader(importURL: string) {\n if (isServer) {\n return async (args: LoaderFunctionArgs) => {\n let module = await import(importURL);\n return (module.loader || module.default)(args);\n };\n }\n return () => null;\n}\n\nfunction serverAction(importURL: string) {\n if (isServer) {\n return async (args: ActionFunctionArgs) => {\n let module = await import(importURL);\n return (module.action || module.default)(args);\n };\n }\n return () => null;\n}\n\nexport const routes = [\n {\n path: \"/\",\n Component: Home,\n loader: serverLoader(\"../routes/Home.loader.ts\"),\n action: serverAction(\"../routes/Home.action.ts\"),\n },\n];\n",[],[278,284],[278],{"_105":293,"_97":294,"_166":295,"_168":-5,"_169":149,"_170":296,"_172":120,"_107":297,"_102":171,"_174":228,"_176":298,"_177":22,"_178":-5,"_179":299,"_101":300},"7b2b1a06-0f87-11f1-8f72-42dde27851f2","README.md","019c82cb-5b48-76ad-b4d1-a949c5bd15d2",28,["D",1771720998652],"# React Router 7 on Val Town — Minimal Example\n\nThe simplest possible full-stack SSR + SPA app on [Val Town](https://val.town), built with **React Router 7**, **Hono**, and **SQLite**. A todo list in ~150 lines of app code that demonstrates every core pattern you need.\n\n> **Want the full version?** See the [message board example](https://www.val.town/x/stevekrouse/reactRouter7Example) with nested routes, search, multiple tables, and more.\n\n## What This Teaches\n\n1. **SSR + Hydration** — Server renders full HTML, client hydrates with `hydrateRoot`\n2. **Shared route tree** — Same `routes.ts` on server and client; `serverLoader`/`serverAction` keeps DB code off the client\n3. **Single-fetch `dataStrategy`** — One request per navigation via `X-Data-Request` header\n4. **Loaders** — Server-side data loading before render\n5. **Actions** — Form submissions via `

` with `intent` pattern\n6. **SQLite persistence** — Val Town's project-scoped database\n7. **Loading states** — `useNavigation()` for optimistic UI\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Hono HTTP entry — SSR + data API + static files\n│ └── database.ts # Schema + all queries (one file, one table)\n├── frontend/\n│ ├── index.html # HTML shell template\n│ └── index.tsx # Client hydration + dataStrategy\n├── routes/\n│ ├── Home.tsx # The entire UI — todo list + add form\n│ ├── Home.loader.ts # Loads all todos from SQLite\n│ └── Home.action.ts # Handles \"add\" and \"toggle\" form submissions\n├── shared/\n│ └── routes.ts # Route tree (shared between server + client)\n└── README.md\n```\n\n## How It Works\n\n### Request Lifecycle\n\n```\nFirst visit (SSR):\n Browser → GET / → Hono → createStaticHandler → runs Home.loader\n → renderToString → full HTML response → Browser hydrates\n\nAfter hydration (SPA):\n User submits form → dataStrategy → POST / (X-Data-Request: true)\n → Hono → runs Home.action + Home.loader → JSON response\n → React Router updates UI\n```\n\n### Key Pattern: `serverLoader` / `serverAction`\n\nThe route tree in `shared/routes.ts` is imported by both server and client. The helpers make this work:\n\n- **On the server**: dynamically import the real loader/action and call it\n- **On the client**: return a no-op stub (the `dataStrategy` handles fetching)\n\nThis means loader/action code and database dependencies **never ship to the browser**.\n\n### Key Pattern: `dataStrategy` (Single-Fetch)\n\nInstead of React Router calling each loader individually on the client, a custom `dataStrategy` in `frontend/index.tsx` makes **one HTTP request** with an `X-Data-Request: true` header. The server runs all matched loaders/actions and returns their data as keyed JSON.\n\n## Extending This\n\n| Want to add... | What to do |\n|---|---|\n| **More pages** | Add routes to `shared/routes.ts` with new `Component`, `loader`, `action` |\n| **Nested layouts** | Use `children` array in routes + `` in parent component |\n| **More tables** | Add queries to `backend/database.ts` (or split into separate files) |\n| **Search** | Add a route with a loader that reads `new URL(request.url).searchParams` |\n| **Redirects from actions** | Return `redirect(\"/path\")` — the `dataStrategy` handles it automatically |\n\n## Getting Started\n\n1. **Fork this val** on Val Town\n2. The database auto-initializes on first request\n3. Visit the HTTP endpoint to see the app\n4. Start extending!\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Server | [Hono](https://hono.dev/) |\n| Routing | [React Router 7](https://reactrouter.com/) |\n| UI | [React 18](https://react.dev/) |\n| Styling | [Twind](https://twind.dev/) (Tailwind via CDN) |\n| Database | Val Town SQLite (`std/sqlite@14-main`) |\n| Runtime | Val Town (Deno) |\n",[],[294],"files",[163,181,188,198,209,215,222,232,242,248,257,266,276,282,292],"counts",{"_305":33,"_306":154,"_307":33,"_308":309,"_312":313},"pulls","branches","forks","envVars",{"_310":33,"_311":33},"count","emptyCount","connections",{"_310":33,"_314":33},"unfilledCount","contents",[317,320,323,326,329],{"_105":164,"_97":165,"_166":167,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":318,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_101":319},["D",1771720891213],[165],{"_105":210,"_97":211,"_166":212,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":321,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_101":322},["D",1771720891213],[211],{"_105":243,"_97":244,"_166":245,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":324,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_101":325},["D",1771720891213],[244],{"_105":277,"_97":278,"_166":279,"_168":-5,"_169":149,"_170":171,"_172":120,"_107":327,"_102":33,"_174":175,"_176":-5,"_177":22,"_178":-5,"_101":328},["D",1771720891213],[278],{"_105":293,"_97":294,"_166":295,"_168":-5,"_169":149,"_170":296,"_172":120,"_107":330,"_102":171,"_174":228,"_176":298,"_177":22,"_178":-5,"_101":331},["D",1771720998652],[294],"upstreamProject",{"_105":334,"_97":335,"_113":114,"_115":-5,"_111":112,"_23":336},"f1a22d8a-14cb-11f0-b108-569c3dd06744","reactRouter7Example",{"_95":96,"_139":140},"upstreamBranch",{"_105":152,"_107":339,"_340":341,"_97":45,"_150":106,"_102":342,"_151":343,"_153":344,"_345":346,"_109":-5,"_160":22,"_111":112,"_159":96,"_16":124,"_158":98},["D",1771720710965],"updatedAt",["D",1771761364903],9,"f1a26f20-14cb-11f0-b108-569c3dd06744",177,"lockfileKey","1771761365089-esm.town_v_stevekrouse_reactRouter7MinimalExample@9-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_95":96,"_97":98,"_99":100,"_103":353,"_358":33,"_359":360,"_361":362,"_368":22,"_369":357,"_370":371,"_374":-5},{"_105":106,"_97":98,"_107":354,"_109":-5,"_110":22,"_111":112,"_113":114,"_115":-5,"_14":116,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":33,"_16":124,"_125":126,"_127":128,"_129":130,"_131":130,"_132":133,"_134":133,"_135":133,"_136":130,"_137":130,"_23":355,"_141":356,"_146":357,"_160":22},["D",1771720710965],{"_95":96,"_139":140},{"_95":96,"_143":140,"_14":116,"_144":145},{"_102":148,"_97":100,"_105":149,"_150":106,"_151":152,"_153":154,"_155":112,"_156":106,"_157":124,"_158":98,"_159":96},"ahead","behind",7,"diff",{"_363":364,"_177":365,"_366":367},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_105":152,"_107":372,"_340":373,"_97":45,"_150":106,"_102":342,"_151":343,"_153":344,"_345":346,"_109":-5,"_160":22,"_111":112,"_159":96,"_16":124,"_158":98},["D",1771720710965],["D",1771761364903],"pull","actionData","errors"]

stevekrouse

reactRouter7MinimalExample

Mergeminimalintomain