Server Side rendering without the Start Framework #3166

prolific · 2025-01-14T17:27:28Z

prolific
Jan 14, 2025

Hi, I am using tanstack router in a project which contains multiple apps so I require custom SSR with tanstack router so that I can just plug it inside the existing architecture. Is it possible to achieve SSR with tanstack router without having to use the whole Start framework?

I tried the following code:

server.tsx

const memoryHistory = createMemoryHistory({
  initialEntries: [req.url],
});
router.update({ history: memoryHistory });
await router.load();
const appHtml = renderToString(<RouterProvider router={router} />);

let statusCode = 200;
if (router.hasNotFoundMatch()) {
  statusCode = 404;
}

const manifest = await getManifest(app);
const assets = getAssets(manifest, app, `src/apps/${app}/client.tsx`, 5175);

res.status(statusCode);
res.header('Content-Type', 'text/html');
return res.send(`
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta char-set="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
      ${assets.css.join("\n")}
    </head>
    <body>
      <div id="app">${appHtml}</div>
      ${assets.js.join("\n")}
    </body>
  </html>
`);

client.tsx

import React from "react";
import { RouterProvider } from '@tanstack/react-router';
import { createRouter } from "./router.js";
import { hydrateRoot } from "react-dom/client";

const router = createRouter();

hydrateRoot(
    document.getElementById("app")!,
    <RouterProvider router={router} />
);

router.ts

export function createRouter() {
    return createTanstackRouter({routeTree});
}

The server seems to be working fine but I get client side hydration error:
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Any idea on how SSR can be implemented without the Start framework?

I even tried using the routers' hydrate and dehydrate methods but with no luck.

offtopic: The typescript typings for hydrate method seems to be wrong. As per typing the hydrate method doesn't accept any parameter but that is obviously incorrect.

tim-meredith-acoa · 2025-01-21T22:20:13Z

tim-meredith-acoa
Jan 21, 2025

The typescript typings for hydrate method seems to be wrong.

Actually, this isn't a JavaScript file with separate TypeScript type definitions, the file is written in TypeScript and the method indeed takes no arguments:

router/packages/react-router/src/router.ts

Line 3059 in b16c2c1

hydrate = () => {

The hydrate method doesn't allow you to provide the dehydrated data directly (as you might want to do after communicating it to the client in the manner of your choice), all it knows how to do is magically rehydrate the router by assuming the data can be found where the Start code would put it.

I'm thinking it might be possible to manually put that data in place before calling hydrate, but this doesn't seem to be officially supported right now, even dehydrate isn't really documented, and I think it's probably meant to be viewed as internal. Doing this without Start is not going to be trivial.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server Side rendering without the Start Framework #3166

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Server Side rendering without the Start Framework #3166

prolific Jan 14, 2025

Replies: 1 comment

tim-meredith-acoa Jan 21, 2025

prolific
Jan 14, 2025

tim-meredith-acoa
Jan 21, 2025