@jxnblk/resrv

React SSR and client-side hydration for Val Town

For streaming responses use ReactStream

Usage

Create val
/** @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:

Create val
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