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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server Side rendering without the Start Framework #3166

{{title}}

Replies: 0 comments

Select a reply

Server Side rendering without the Start Framework #3166

prolific Jan 14, 2025

Replies: 0 comments

prolific
Jan 14, 2025