Public
HTTP (deprecated)
  • jxnblk avatar
    resrv
    @jxnblk
    React SSR and client-side hydration for Val Town For streaming responses use ReactStream Usage /** @jsxImportSource https://esm.sh/react */ import resrv, { React } from "https://esm.town/v/jxnblk/resrv"; function App() { const [count, setCount] = React.useState(0); return ( <div> <h1>Resrv</h1> <p>React SSR with client-side hydration in Val Town</p> <pre>{count}</pre> <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount(count + 1)}>+</button> </div> ); } export default resrv(App, import.meta.url); Live example React requires matching versions for SSR and hydration. Import React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1). HTML Root Hydration To render a component that includes a <head> and <body> tag, pass root: true to the third options argument: function App ({ script }) { return ( <body> <h1>Hello</h1> {script} </body> ); } export default resrv(App, import.meta.url, { root: true }); Inspired by https://www.val.town/v/stevekrouse/react_http
    Script
1
Next
jxnblk-resrv_example.web.val.run
May 4, 2024