FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
jxnblk
jxnblkReactStream_migrated
Public
Like
3
ReactStream_migrated
Home
Code
2
README.md
S
main.tsx
Branches
1
Pull requests
Remixes
2
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
README.md

React SSR and client-side hydration for Val Town

Usage

Create val
/** @jsxImportSource https://esm.sh/react */ import { render, React } from "https://esm.town/v/jxnblk/ReactStream"; function App() { const [count, setCount] = React.useState(0); return ( <html> <body> <h1>ReactStream</h1> <p>React SSR with client-side hydration in Val Town</p> <pre>{count}</pre> <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount(count + 1)}>+</button> </body> </html> ); } export default render(App, import.meta.url);

Live example

To render static HTML without hydration, pass false as the second argument.

Create val
export default render(App, false);

Middleware

Custom middleware can be added in an array as the third argument. Middleware can add data to the req.data object or return a response for things like API endpoints.

Create val
export default render(App, import.meta.url, [ analytics, robots("User-agent: *\nAllow: /"), getInitialProps ])

robots.txt

ReactStream has a built-in middleware to handle request to /robots.txt

Create val
import { render, robots } from "https://esm.town/v/jxnblk/ReactStream"; // ... export default render(App, import.meta.url, [ robots("User-agent: *\nAllow: /"), ])

Add a backend request handler

Create val
// example middleware async function api (req: Request, res: Response, next): Promise<Response> { if (req.pathname !== "/api") return next(); if (req.method === "POST") { return Repsonse.json({ message: "Hello POST request" }); } return Response.json({ ok: true }); } export default render(App, import.meta.url, [ api ]);

Fetch data on the server to set initial props

Create val
// example middleware async function getInitialProps (req: Request, res: Response, next) { // fetch data or do async work to pass as props to the component req.data = { hello: "props", }; return next(); } export default render(App, import.meta.url, [ getInitialProps ]);

Starter template

Create val
/** @jsxImportSource https://esm.sh/react */ import { render } from "https://esm.town/v/jxnblk/ReactStream"; function App () { return ( <html> <head> <title>ReactStream</title> </head> <body> hello </body> </html> ); } export default render(App, import.meta.url, []);

React requires matching versions for SSR and hydration. Import React from https://esm.town/v/jxnblk/ReactStream to ensure your component uses the same version as this library (currently react@18.3.1).

Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo

Migrated from folder: _LEAVE_AS_IS/ReactStream

Code
README.md
S
main.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.