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",[126],"pulls","branches","forks","envVars",{"_138":39,"_140":39},"connections",{"_138":39,"_139":39},"count","unfilledCount","emptyCount",{"_18":125,"_20":126,"_110":127,"_112":-5,"_113":66,"_114":117,"_115":26,"_22":147,"_63":39,"_118":95,"_120":129,"_122":62,"_123":-5,"_144":148,"_84":149},{"_18":108,"_20":109,"_110":111,"_112":-5,"_113":66,"_114":64,"_115":26,"_22":143,"_63":117,"_118":119,"_120":121,"_122":62,"_123":-5,"_144":145,"_84":146},["D",1736948953237],"children",[],[109],["D",1736948748373],[],[126],["D",1745943436107],{"_16":17,"_82":78},{"_16":17,"_75":76,"_77":78,"_32":33,"_79":80,"_81":62},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_55":-5,"_103":187,"_188":189,"_190":191,"_192":62,"_193":62,"_194":62,"_195":26,"_196":-5,"_197":-7,"_198":-7,"_199":39,"_200":62,"_201":62,"_202":-5,"_203":62,"_204":62,"_205":62,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":65,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Search