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 & ",[],[184],{"_107":191,"_100":192,"_155":193,"_157":-5,"_158":142,"_159":124,"_161":162,"_109":194,"_104":195,"_164":196,"_166":197,"_167":27,"_168":101,"_169":198,"_103":199},"cd87e1e6-0bfd-11f0-82c5-569c3dd06744","demo.http.tsx","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);",[],[192],{"_107":201,"_100":202,"_155":203,"_157":-5,"_158":142,"_159":141,"_161":162,"_109":204,"_104":205,"_164":206,"_166":207,"_167":27,"_168":-5,"_169":208,"_103":209},"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;",[],[202],{"_107":211,"_100":212,"_155":213,"_157":-5,"_158":142,"_159":214,"_161":162,"_109":215,"_104":216,"_164":206,"_166":217,"_167":27,"_168":-5,"_169":218,"_103":219},"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};",[],[212],{"_107":221,"_100":222,"_155":223,"_157":-5,"_158":142,"_159":224,"_161":162,"_109":225,"_104":226,"_164":206,"_166":227,"_167":27,"_168":-5,"_169":228,"_103":229},"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};",[],[222],{"_107":231,"_100":232,"_155":233,"_157":-5,"_158":142,"_159":234,"_161":162,"_109":235,"_104":195,"_164":206,"_166":236,"_167":27,"_168":-5,"_169":237,"_103":238},"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 };",[],[232],{"_107":240,"_100":241,"_155":242,"_157":-5,"_158":142,"_159":243,"_161":162,"_109":244,"_104":216,"_164":206,"_166":245,"_167":27,"_168":-5,"_169":246,"_103":247},"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};",[],[241],{"_107":249,"_100":250,"_155":251,"_157":-5,"_158":142,"_159":252,"_161":162,"_109":253,"_104":216,"_164":206,"_166":254,"_167":27,"_168":-5,"_169":255,"_103":256},"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}",[],[250],"files",[152,171,182,190,200,210,220,230,239,248],"counts",{"_261":216,"_262":175,"_263":31,"_264":31},"pulls","branches","forks","envVars","contents",[267,270,273,276,279,282,285,288,291],{"_107":153,"_100":154,"_155":156,"_157":-5,"_158":142,"_159":160,"_161":162,"_109":268,"_104":31,"_164":165,"_166":-5,"_167":27,"_168":-5,"_103":269},["D",1741967305553],[154],{"_107":183,"_100":184,"_155":121,"_157":-5,"_158":142,"_159":185,"_161":162,"_109":271,"_104":160,"_164":177,"_166":187,"_167":27,"_168":-5,"_103":272},["D",1743017118817],[184],{"_107":191,"_100":192,"_155":193,"_157":-5,"_158":142,"_159":124,"_161":162,"_109":274,"_104":195,"_164":196,"_166":197,"_167":27,"_168":101,"_103":275},["D",1743184515121],[192],{"_107":201,"_100":202,"_155":203,"_157":-5,"_158":142,"_159":141,"_161":162,"_109":277,"_104":205,"_164":206,"_166":207,"_167":27,"_168":-5,"_103":278},["D",1746210490086],[202],{"_107":211,"_100":212,"_155":213,"_157":-5,"_158":142,"_159":214,"_161":162,"_109":280,"_104":216,"_164":206,"_166":217,"_167":27,"_168":-5,"_103":281},["D",1742041560001],[212],{"_107":221,"_100":222,"_155":223,"_157":-5,"_158":142,"_159":224,"_161":162,"_109":283,"_104":226,"_164":206,"_166":227,"_167":27,"_168":-5,"_103":284},["D",1742041557972],[222],{"_107":231,"_100":232,"_155":233,"_157":-5,"_158":142,"_159":234,"_161":162,"_109":286,"_104":195,"_164":206,"_166":236,"_167":27,"_168":-5,"_103":287},["D",1741987473088],[232],{"_107":240,"_100":241,"_155":242,"_157":-5,"_158":142,"_159":243,"_161":162,"_109":289,"_104":216,"_164":206,"_166":245,"_167":27,"_168":-5,"_103":290},["D",1742041549622],[241],{"_107":249,"_100":250,"_155":251,"_157":-5,"_158":142,"_159":252,"_161":162,"_109":292,"_104":216,"_164":206,"_166":254,"_167":27,"_168":-5,"_103":293},["D",1742041554353],[250],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.remixes",{"_98":99,"_100":101,"_105":300,"_263":304,"_305":-5},{"_107":108,"_100":101,"_109":301,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":118,"_12":119,"_120":121,"_122":27,"_123":124,"_125":31,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_135":27,"_21":302,"_139":303},["D",1741967219180],{"_98":99,"_137":138},{"_104":141,"_100":42,"_107":142,"_143":108,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":101,"_149":99},[],"upstream","routes/_app","actionData","errors"]