◈ wultra

In order to render your app on the server, you'll need to wrap your app with top-levelRouter and specify ssrPath prop (usually, derived from current request).

import { renderToString } from "react-dom/server";
import { Router } from "wouter";

const handleRequest = (req, res) => {
  // top-level Router is mandatory in SSR mode
  const prerendered = renderToString(
    <Router ssrPath={req.path}>
      <App />
    </Router>
  );

  // respond with prerendered html
};

On the client, the static markup must be hydrated in order for your app to become interactive.

import { hydrateRoot } from "react-dom/server";

const root = hydrateRoot(
  domNode,
  // during hydration `ssrPath` is set to `location.pathname`
  <Router>
    <App />
  </Router>
);

❕ Note that to avoid having hydration warnings, the JSX rendered on the client must match the one used by the server, so the Router component must be present.