FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
project logo
jxnblkreact-router-data-mode-starter
Minimal React Router starter using data mode
Remix of jxnblk/react-router-ssr-starter
Public
Like
react-router-data-mode-starter
Home
Code
5
README.md
H
api.tsx
client.tsx
H
http.tsx
routes.tsx
Branches
1
Pull requests
Remixes
1
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
https://jxnblk--bc1e880c319511f0bf2d569c3dd06744.web.val.run
README.md

React Router Data Mode Starter

Minimal React Router starter example in "data mode" with server-side rendering for Val Town

View demo

How it works

The http.tsx file is the main server that responds with an HTML stream, using React Router. The HTML includes a <script type="module"> tag that loads the client.tsx file to hydrate the app with client-side routing provided by React Router in "data mode".

The routes are defined in routes and can include data loading and actions. The /about route includes a loader that fetches data from the api.tsx server, which returns a JSON response. The About page uses the useLoaderData hook to render the data from the loader in the page.

View more starters

HTTP
  • api.tsx
    jxnblk--bc…44.web.val.run
  • http.tsx
    jxnblk--93…86.web.val.run
Code
README.md
H
api.tsx
client.tsx
H
http.tsx
routes.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.