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@19.0.0).\n\nInspired by & ",[],[188],{"_105":195,"_96":196,"_161":197,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":198,"_101":32,"_169":199,"_171":200,"_172":22,"_173":-5,"_174":201,"_100":202},"34b9bd78-13db-11f0-afba-569c3dd06744","index.tsx","30db26a6-561d-4d4a-aef2-adfa3048a963",["D",1744049265176],"script","/** @jsxImportSource https://esm.sh/react@19.0.0 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@19.0.0/client\";\nimport * as React from \"https://esm.sh/react@19.0.0\";\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;",[],[196],{"_105":204,"_96":205,"_161":206,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":207,"_101":32,"_169":199,"_171":208,"_172":22,"_173":-5,"_174":209,"_100":210},"34b9e3c0-13db-11f0-afba-569c3dd06744","parse-headers.tsx","68d0c144-acfc-4ae3-913a-824d0db7fc65",["D",1744049265176],"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};",[],[205],{"_105":212,"_96":213,"_161":214,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":215,"_101":32,"_169":199,"_171":216,"_172":22,"_173":-5,"_174":217,"_100":218},"34b9e654-13db-11f0-afba-569c3dd06744","parse-url.tsx","b86feacf-7bf4-4f8b-a5b7-814daebca610",["D",1744049265176],"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};",[],[213],{"_105":220,"_96":221,"_161":222,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":223,"_101":32,"_169":199,"_171":224,"_172":22,"_173":-5,"_174":225,"_100":226},"34b9e8c0-13db-11f0-afba-569c3dd06744","react-stream.tsx","87afbae6-d667-4055-82ee-5fdf313b6619",["D",1744049265176],"/** @jsxImportSource https://esm.sh/react@19.0.0 */\nimport * as React from \"https://esm.sh/react@19.0.0\";\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@19.0.0/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 };",[],[221],{"_105":228,"_96":229,"_161":230,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":231,"_101":32,"_169":199,"_171":232,"_172":22,"_173":-5,"_174":233,"_100":234},"34b9eabe-13db-11f0-afba-569c3dd06744","robots.tsx","0475bda1-c790-4c40-9797-8af163ab8eea",["D",1744049265176],"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};",[],[229],{"_105":236,"_96":237,"_161":238,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":239,"_101":32,"_169":199,"_171":240,"_172":22,"_173":-5,"_174":241,"_100":242},"34b9ecf8-13db-11f0-afba-569c3dd06744","types.tsx","8c2eede3-70a1-4c84-a8aa-818a24a35913",["D",1744049265176],"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}",[],[237],"files",[158,176,186,194,203,211,219,227,235],"counts",{"_247":102,"_248":249,"_250":32,"_251":252},"pulls","branches",3,"forks","envVars",{"_253":32,"_254":32},"count","emptyCount","contents",[257,260,263,266,269,272,275,278],{"_105":159,"_96":160,"_161":162,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":258,"_101":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_100":259},["D",1744049265176],[160],{"_105":187,"_96":188,"_161":189,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":261,"_101":32,"_169":181,"_171":191,"_172":22,"_173":-5,"_100":262},["D",1744049265176],[188],{"_105":195,"_96":196,"_161":197,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":264,"_101":32,"_169":199,"_171":200,"_172":22,"_173":-5,"_100":265},["D",1744049265176],[196],{"_105":204,"_96":205,"_161":206,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":267,"_101":32,"_169":199,"_171":208,"_172":22,"_173":-5,"_100":268},["D",1744049265176],[205],{"_105":212,"_96":213,"_161":214,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":270,"_101":32,"_169":199,"_171":216,"_172":22,"_173":-5,"_100":271},["D",1744049265176],[213],{"_105":220,"_96":221,"_161":222,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":273,"_101":32,"_169":199,"_171":224,"_172":22,"_173":-5,"_100":274},["D",1744049265176],[221],{"_105":228,"_96":229,"_161":230,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":276,"_101":32,"_169":199,"_171":232,"_172":22,"_173":-5,"_100":277},["D",1744049265176],[229],{"_105":236,"_96":237,"_161":238,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":279,"_101":32,"_169":199,"_171":240,"_172":22,"_173":-5,"_100":280},["D",1744049265176],[237],"upstreamProject","upstreamBranch",{"_105":147,"_107":284,"_285":286,"_96":287,"_145":106,"_101":149,"_146":288,"_148":289,"_290":-5,"_109":-5,"_155":22,"_111":112,"_154":95,"_16":125,"_153":97},["D",1743017143459],"updatedAt",["D",1743017424928],"react-19","909a71d0-00eb-11f0-997f-569c3dd06744",44,"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_101":102,"_100":73,"_103":297,"_156":302,"_243":330,"_181":-7,"_255":331,"_348":349,"_352":-5,"_353":249,"_354":32,"_355":356,"_251":-5},{"_105":106,"_96":97,"_107":298,"_109":-5,"_110":22,"_111":112,"_113":114,"_115":116,"_14":117,"_118":119,"_120":22,"_121":-5,"_122":123,"_124":32,"_16":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":299,"_138":300,"_141":301,"_155":22},["D",1741967219180],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":117},{"_101":143,"_96":99,"_105":144,"_145":106,"_146":147,"_148":149,"_150":112,"_151":106,"_152":125,"_153":97,"_154":95},[303,309,312,315,318,321,324,327],{"_105":159,"_96":160,"_161":162,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":168,"_101":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":304,"_100":308},[305],{"_105":177,"_96":178,"_161":179,"_163":162,"_164":144,"_165":102,"_166":167,"_107":180,"_101":32,"_169":181,"_171":182,"_172":22,"_173":-5,"_174":306,"_100":307},[],[160,178],[160],{"_105":187,"_96":188,"_161":189,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":190,"_101":32,"_169":181,"_171":191,"_172":22,"_173":-5,"_174":310,"_100":311},[],[188],{"_105":195,"_96":196,"_161":197,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":198,"_101":32,"_169":199,"_171":200,"_172":22,"_173":-5,"_174":313,"_100":314},[],[196],{"_105":204,"_96":205,"_161":206,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":207,"_101":32,"_169":199,"_171":208,"_172":22,"_173":-5,"_174":316,"_100":317},[],[205],{"_105":212,"_96":213,"_161":214,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":215,"_101":32,"_169":199,"_171":216,"_172":22,"_173":-5,"_174":319,"_100":320},[],[213],{"_105":220,"_96":221,"_161":222,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":223,"_101":32,"_169":199,"_171":224,"_172":22,"_173":-5,"_174":322,"_100":323},[],[221],{"_105":228,"_96":229,"_161":230,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":231,"_101":32,"_169":199,"_171":232,"_172":22,"_173":-5,"_174":325,"_100":326},[],[229],{"_105":236,"_96":237,"_161":238,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":239,"_101":32,"_169":199,"_171":240,"_172":22,"_173":-5,"_174":328,"_100":329},[],[237],[303,305,309,312,315,318,321,324,327],[332,334,336,338,340,342,344,346],{"_105":159,"_96":160,"_161":162,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":258,"_101":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_100":333},[160],{"_105":187,"_96":188,"_161":189,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":261,"_101":32,"_169":181,"_171":191,"_172":22,"_173":-5,"_100":335},[188],{"_105":195,"_96":196,"_161":197,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":264,"_101":32,"_169":199,"_171":200,"_172":22,"_173":-5,"_100":337},[196],{"_105":204,"_96":205,"_161":206,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":267,"_101":32,"_169":199,"_171":208,"_172":22,"_173":-5,"_100":339},[205],{"_105":212,"_96":213,"_161":214,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":270,"_101":32,"_169":199,"_171":216,"_172":22,"_173":-5,"_100":341},[213],{"_105":220,"_96":221,"_161":222,"_163":-5,"_164":144,"_165":102,"_166":22,"_107":273,"_101":32,"_169":199,"_171":224,"_172":22,"_173":-5,"_100":343},[221],{"_105":228,"_96":229,"_161":230,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":276,"_101":32,"_169":199,"_171":232,"_172":22,"_173":-5,"_100":345},[229],{"_105":236,"_96":237,"_161":238,"_163":-5,"_164":144,"_165":102,"_166":167,"_107":279,"_101":32,"_169":199,"_171":240,"_172":22,"_173":-5,"_100":347},[237],"upstream",{"_105":147,"_107":350,"_285":351,"_96":287,"_145":106,"_101":149,"_146":288,"_148":289,"_290":-5,"_109":-5,"_155":22,"_111":112,"_154":95,"_16":125,"_153":97},["D",1743017143459],["D",1743017424928],"pull","ahead","behind","templates",[],"actionData","errors"]