ReactStatic

React SSR in Val Town

\n \n \n );\n}\n\nexport default render(App, []);\n```\n\n\n\n\n## Middleware\n\nCustom middleware can be added in an array as the second 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, [\n analytics,\n robots(\"User-agent: *\\nAllow: /\"),\n getInitialProps\n])\n```\n\n### robots.txt\n\nReactStatic has a built-in middleware to handle request to `/robots.txt`\n\n```tsx\nimport { render, robots } from \"https://esm.town/v/jxnblk/ReactStatic\";\n// ...\nexport default render(App, [\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, [ 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, [ getInitialProps ]);\n```\n\n## Starter template\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { render } from \"https://esm.town/v/jxnblk/ReactStatic\";\n\nfunction App () {\n return (\n \n \n ReactStatic\n \n \n hello\n \n \n );\n}\n\nexport default render(App, []);\n```\n\nReact requires matching versions for SSR and hydration -- ensure you import `react@18.3.1` when using this library.\n\nInspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo\n\n\nMigrated from folder: _LEAVE_AS_IS/ReactStatic",[75],"pulls","branches","forks","envVars",{"_71":20,"_174":20},"connections",{"_71":20,"_173":20},"unfilledCount","emptyCount",{"_28":162,"_13":75,"_62":74,"_38":-5,"_30":31,"_155":35,"_156":86,"_32":181,"_34":20,"_65":48,"_158":164,"_67":24,"_160":-5,"_178":182,"_130":183},{"_28":154,"_13":64,"_62":63,"_38":-5,"_30":31,"_155":72,"_156":86,"_32":177,"_34":35,"_65":66,"_158":159,"_67":24,"_160":-5,"_178":179,"_130":180},["D",1736948953237],"children",[],[64],["D",1736948748373],[],[75],["D",1745943436107],{"_11":12,"_129":70},{"_11":12,"_124":125,"_69":70,"_25":68,"_126":127,"_128":24},{"_34":72,"_13":16,"_28":31,"_116":82,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_46":-5,"_149":221,"_222":223,"_224":225,"_226":24,"_227":24,"_228":24,"_229":86,"_230":-5,"_231":-7,"_232":-7,"_233":20,"_234":24,"_235":24,"_236":-5,"_237":24,"_238":24,"_239":24,"_240":-5},"ENV",{"_192":193,"_194":195,"_196":16,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History