Skip to content
On this page

Server Side Rendering

Type Route supports server side rendering. The key to making this support possible is the router.session.reset function. This function allows you to reconfigure the underlying history session instance that powers Type Route. By setting the type of the instance to "memory" and giving it an initial entry of the current url the user is requesting, you can be sure that your app will server-side render correctly. Below is an example of how to accomplish this using React.

Server Code

import fastify from "fastify";
import ReactDOM from "react-dom/server";
import React from "react";
import { App, session, RouteProvider } from "../client";

const app = fastify();

app.get("/*", (request, response) => {
    type: "memory",
    initialEntries: [request.req.url],

  const appHtml = ReactDOM.renderToString(
      <App />

    `<body><div id="app">${appHtml}</div><script src="http://localhost/bundle.js"></script></body>`


Client Code

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { createRouter, defineRoute } from "type-route";

export const { RouteProvider, useRoute, routes, session } = createRouter({
  home: defineRoute("/"),
  one: defineRoute("/one"),
  two: defineRoute("/two"),

export function App() {
  const route = useRoute();

  return (
        <a {...routes.home().link}>Home</a>
        <a {}>One</a>
        <a {...routes.two().link}>Two</a>
      { === "home" && <div>Home</div>}
      { === "one" && <div>One</div>}
      { === "two" && <div>Two</div>}
      { === false && <div>Not Found</div>}

if (!process.env.SERVER) {
      <App />

Type Route is a Zilch project