molefrog/wouter v2.11.0

v2.11.0: Better SSR support

on GitHub

In this version, we are introducing a new prop that you can pass to the top-level Router component: ssrPath. The migration to the useSyncExternalStore hook in v2.10.0 made it possible for us to use a native way of telling React what the location should be when rendering on the server.

Prior to this release, our users had to override the default location hook with wouter/static-location, which lacked a nice DX and could cause hydration warnings. We are deprecating the static location hook in favor of the new ssrPath prop. Rendering your app on the server is now as easy as:

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
};

You can find a detailed guide in the README. To see the new API in action, we have prepared a simple demo powered by Wouter and Ultra, a server-side rendering framework for Deno. Take a look at how the app is rendered on the server and then hydrated in the browser.

Demo: wultra.deno.dev

Full changelog:

• SSR support in syncExternalStore #305
• index.d.ts now doesn't export types of methods that aren't present in the module #306 Thanks @Mati365
• Fix incorrect TS4.1 type exports #291 Thanks @tec27
• wouter-preact: Preact type declarations are now up-to-date with the main package, type exports have been fixed #309 #294 Thanks @robertknight and @jerssonM