ReactStream

React SSR with client-side hydration in Val Town

{count}

\n \n \n \n \n );\n}\n\nexport default render(App, import.meta.url);\n```\n\n\n\nUsed in [jxnblk.com](https://www.val.town/x/jxnblk/dotcom)\n\nTo render static HTML without hydration, pass `false` as the second argument.\n\n```tsx\nexport default render(App, false);\n```\n\n## Middleware\n\nCustom middleware can be added in an array as the third argument.\nMiddleware can add data to the `req.data` object or return a response for things like API endpoints.\n\n```tsx\nexport default render(App, import.meta.url, [\n analytics,\n robots(\"User-agent: *\\nAllow: /\"),\n getInitialProps\n])\n```\n\n### robots.txt\n\nReactStream has a built-in middleware to handle request to `/robots.txt`\n\n```tsx\nimport { render, robots } from \"https://esm.town/v/jxnblk/ReactStream\";\n// ...\nexport default render(App, import.meta.url, [\n robots(\"User-agent: *\\nAllow: /\"),\n])\n```\n\n### Add a backend request handler\n\n```tsx\n// example middleware\nasync function api (req: Request, res: Response, next): Promise {\n if (req.pathname !== \"/api\") return next();\n if (req.method === \"POST\") {\n return Repsonse.json({ message: \"Hello POST request\" });\n }\n return Response.json({ ok: true });\n}\n\nexport default render(App, import.meta.url, [ api ]);\n```\n\n### Fetch data on the server to set initial props\n\n\n```tsx \n// example middleware\nasync function getInitialProps (req: Request, res: Response, next) {\n // fetch data or do async work to pass as props to the component\n req.data = {\n hello: \"props\",\n };\n return next();\n}\n\nexport default render(App, import.meta.url, [ getInitialProps ]);\n```\n\n## Starter template\n\n```tsx\n/** @jsxImportSource https://esm.sh/react */\nimport { render } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nfunction App () {\n return (\n \n \n ReactStream\n \n \n hello\n \n \n );\n}\n\nexport default render(App, import.meta.url, []);\n```\n\nReact requires matching versions for SSR and hydration.\nImport `React` from `https://esm.town/v/jxnblk/reactstream/index.tsx` to ensure your component uses the same version as this library (currently react@18.3.1).\n\nInspired by & ",[],[188],{"_106":195,"_98":102,"_159":196,"_161":-5,"_162":144,"_163":123,"_165":166,"_108":197,"_103":198,"_168":199,"_170":200,"_171":25,"_172":99,"_173":201,"_101":202},"cd87e1e6-0bfd-11f0-82c5-569c3dd06744","920f58a6-0bfd-11f0-affb-569c3dd06744",["D",1743184515121],6,"http","/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { render, React } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nfunction App() {\n const [count, setCount] = React.useState(0);\n \n return (\n \n \n

ReactStream

React SSR with client-side hydration in Val Town

{count}

\n \n \n \n \n );\n}\n\nexport default render(App, import.meta.url);",[],[102],{"_106":204,"_98":205,"_159":206,"_161":-5,"_162":144,"_163":143,"_165":166,"_108":207,"_103":208,"_168":209,"_170":210,"_171":25,"_172":-5,"_173":211,"_101":212},"33285dc8-2783-11f0-89e2-569c3dd06744","index.tsx","c4041a58-00eb-11f0-ac18-569c3dd06744",["D",1746210490086],22,"script","/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.3.1/client\";\nimport * as React from \"https://esm.sh/react@18.3.1\";\nimport { reactStream } from \"./react-stream.tsx\";\nimport { parseURL } from \"./parse-url.tsx\";\nimport { parseHeaders } from \"./parse-headers.tsx\";\nimport { ReactStreamProps, Middleware } from \"./types.tsx\";\n\nexport { React };\nexport { robots } from \"./robots.tsx\";\n\nexport function render(\n /** Root-level React component that renders an entire element\n * including the head and body tags.\n */\n Component: React.ComponentType,\n /** On Val Town, use `import.meta.url` for client-side hydration */\n module: string | false,\n /** Optional middleware */\n wares: Middleware[] = [],\n) {\n if (typeof document !== \"undefined\" && module) {\n console.log(\"jxnblk/reactstream\");\n const props = window.__data;\n hydrateRoot(document, );\n }\n\n return async function handler(request: Request): Promise {\n const main = reactStream(Component, module);\n const middleware: Middleware[] = [\n parseURL,\n parseHeaders,\n ...wares.slice(),\n main,\n ].filter(Boolean);\n\n let res: Response = new Response();\n const req: DataRequest = Object.assign(request.clone(), { data: {} });\n req.data = {};\n\n const next = async (nextRes?: Response): Promise => {\n const fn = middleware.shift();\n if (nextRes) res = nextRes;\n if (!fn) return main(req, res);\n return fn(req, res, next);\n };\n return next();\n };\n}\n\nexport default render;",[],[205],{"_106":214,"_98":215,"_159":216,"_161":-5,"_162":144,"_163":217,"_165":166,"_108":218,"_103":219,"_168":209,"_170":220,"_171":25,"_172":-5,"_173":221,"_101":222},"a72fe152-0198-11f0-a3b2-569c3dd06744","parse-headers.tsx","bfc969d6-00ee-11f0-94a5-569c3dd06744",41,["D",1742041560001],1,"import { Middleware } from \"./types.tsx\";\n\nexport const parseHeaders: Middleware = async (req, res, next) => {\n req.data.headers = req.headers;\n req.data.cookie = req.headers.get(\"cookie\");\n return next();\n};",[],[215],{"_106":224,"_98":225,"_159":226,"_161":-5,"_162":144,"_163":227,"_165":166,"_108":228,"_103":229,"_168":209,"_170":230,"_171":25,"_172":-5,"_173":231,"_101":232},"a5fa66ae-0198-11f0-8b38-569c3dd06744","parse-url.tsx","a5a7bf62-00ee-11f0-b6fd-569c3dd06744",40,["D",1742041557972],4,"import { Middleware } from \"./types.tsx\";\n\n// default middleware\nexport const parseURL: Middleware = async (req, res, next) => {\n const url = new URL(req.url);\n const { pathname, search } = url;\n req.data.url = url;\n req.data.pathname = pathname;\n req.data.search = search;\n req.data.searchParams = Object.fromEntries(req.data.url.searchParams);\n return next();\n};",[],[225],{"_106":234,"_98":235,"_159":236,"_161":-5,"_162":144,"_163":237,"_165":166,"_108":238,"_103":198,"_168":209,"_170":239,"_171":25,"_172":-5,"_173":240,"_101":241},"b8e00252-011a-11f0-a169-569c3dd06744","react-stream.tsx","4dd4098a-00ee-11f0-928b-569c3dd06744",37,["D",1741987473088],"/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport * as React from \"https://esm.sh/react@18.3.1\";\nimport { ReactStreamProps, Middleware } from \"./types.tsx\";\n\n// main react response handler\nexport const reactStream = (\n Component: React.ComponentType,\n module: string | false,\n): Middleware =>\n async function(req: DataRequest, res: Response): Promise {\n const { renderToReadableStream } = await import(\"https://esm.sh/react-dom@18.3.1/server\");\n\n const stream = await renderToReadableStream(\n ,\n module\n ? {\n bootstrapModules: [module],\n bootstrapScriptContent: `window.__data=${JSON.stringify(req.data)}`,\n }\n : {},\n );\n const headers = res.headers;\n headers.set(\"Content-Type\", \"text/html\");\n\n console.log(\"reactstream\", res.status);\n return new Response(stream, {\n headers,\n status: res.status,\n statusText: res.statusText,\n });\n };",[],[235],{"_106":243,"_98":244,"_159":245,"_161":-5,"_162":144,"_163":246,"_165":166,"_108":247,"_103":219,"_168":209,"_170":248,"_171":25,"_172":-5,"_173":249,"_101":250},"a1009a4c-0198-11f0-b9dd-569c3dd06744","robots.tsx","d77f3ba0-00ee-11f0-b2d7-569c3dd06744",38,["D",1742041549622],"import { Middleware } from \"./types.tsx\";\n\n/** respond to /robots.txt with a custom string */\nexport const robots = (txt: string): Middleware => async (req, res, next) => {\n const url = new URL(req.url);\n if (txt && url.pathname === \"/robots.txt\") {\n return new Response(txt, { headers: { \"Content-Type\": \"text/plain\" } });\n }\n return next();\n};",[],[244],{"_106":252,"_98":253,"_159":254,"_161":-5,"_162":144,"_163":255,"_165":166,"_108":256,"_103":219,"_168":209,"_170":257,"_171":25,"_172":-5,"_173":258,"_101":259},"a3d22ee8-0198-11f0-a3b2-569c3dd06744","types.tsx","68871376-00ee-11f0-8acb-569c3dd06744",39,["D",1742041554353],"export type RequestHandler = (request: Request) => Promise;\nexport type DataFetcher = (request: Request) => Promise;\n\nexport type DataRequest = Request & { data: any };\nexport type NextCallback = () => Promise;\nexport type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise;\n\nexport interface ReactStreamProps {\n url: URL;\n pathname: string;\n search: string;\n searchParams: Record;\n headers: Headers;\n cookie: string;\n}",[],[253],"files",[156,175,186,194,203,213,223,233,242,251],"counts",{"_264":219,"_265":179,"_266":29,"_267":29},"pulls","branches","forks","envVars","contents",[],{"_106":195,"_98":102,"_159":196,"_161":-5,"_162":144,"_163":123,"_165":166,"_108":271,"_103":198,"_168":199,"_170":200,"_171":25,"_172":99,"_101":272},["D",1743184515121],[102],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_96":97,"_98":99,"_100":40,"_103":-7,"_101":102,"_104":279,"_154":284,"_260":315,"_181":316,"_268":318,"_319":-5,"_320":25,"_321":-5,"_322":-5,"_323":-5,"_324":325},{"_106":107,"_98":99,"_108":280,"_110":-5,"_111":25,"_112":113,"_114":115,"_116":117,"_12":118,"_119":120,"_121":25,"_122":123,"_124":29,"_14":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_19":281,"_138":282,"_141":283,"_153":25},["D",1741967219180],{"_96":97,"_136":137},{"_96":97,"_140":137},{"_103":143,"_98":40,"_106":144,"_145":107,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":99,"_152":97},[285,291,294,297,300,303,306,309,312],{"_106":157,"_98":158,"_159":160,"_161":-5,"_162":144,"_163":164,"_165":166,"_108":167,"_103":29,"_168":169,"_170":-5,"_171":25,"_172":-5,"_173":286,"_101":290},[287],{"_106":176,"_98":177,"_159":178,"_161":160,"_162":144,"_163":179,"_165":166,"_108":180,"_103":29,"_168":181,"_170":182,"_171":25,"_172":-5,"_173":288,"_101":289},[],[158,177],[158],{"_106":187,"_98":188,"_159":120,"_161":-5,"_162":144,"_163":189,"_165":166,"_108":190,"_103":164,"_168":181,"_170":191,"_171":25,"_172":-5,"_173":292,"_101":293},[],[188],{"_106":195,"_98":102,"_159":196,"_161":-5,"_162":144,"_163":123,"_165":166,"_108":197,"_103":198,"_168":199,"_170":200,"_171":25,"_172":99,"_173":295,"_101":296},[],[102],{"_106":204,"_98":205,"_159":206,"_161":-5,"_162":144,"_163":143,"_165":166,"_108":207,"_103":208,"_168":209,"_170":210,"_171":25,"_172":-5,"_173":298,"_101":299},[],[205],{"_106":214,"_98":215,"_159":216,"_161":-5,"_162":144,"_163":217,"_165":166,"_108":218,"_103":219,"_168":209,"_170":220,"_171":25,"_172":-5,"_173":301,"_101":302},[],[215],{"_106":224,"_98":225,"_159":226,"_161":-5,"_162":144,"_163":227,"_165":166,"_108":228,"_103":229,"_168":209,"_170":230,"_171":25,"_172":-5,"_173":304,"_101":305},[],[225],{"_106":234,"_98":235,"_159":236,"_161":-5,"_162":144,"_163":237,"_165":166,"_108":238,"_103":198,"_168":209,"_170":239,"_171":25,"_172":-5,"_173":307,"_101":308},[],[235],{"_106":243,"_98":244,"_159":245,"_161":-5,"_162":144,"_163":246,"_165":166,"_108":247,"_103":219,"_168":209,"_170":248,"_171":25,"_172":-5,"_173":310,"_101":311},[],[244],{"_106":252,"_98":253,"_159":254,"_161":-5,"_162":144,"_163":255,"_165":166,"_108":256,"_103":219,"_168":209,"_170":257,"_171":25,"_172":-5,"_173":313,"_101":314},[],[253],[285,287,291,294,297,300,303,306,309,312],{"_106":195,"_98":102,"_159":196,"_161":-5,"_162":144,"_163":123,"_165":166,"_108":271,"_103":198,"_168":199,"_170":200,"_171":25,"_172":99,"_101":317},[102],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]