TanStackT
TanStack•11mo ago•
5 replies
rubber-blue

Pre-rendering or static generation some part of the routes

Hi folks. Are you guys ever trying to do static generation with Tanstack React Router? I have no luck finding any good reference about it.

I have an app and want to create the help & support page to be static that live within the app. What I've done so far; not much but I just confused to get things right when getting the HTML of the page.

The /docs/$slug component is using MDX and I have no issue in local development.
import { renderToString } from "react-dom/server";
import fs from "node:fs/promises";
import path from "path";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "../src/routeTree.gen";

async function build() {
  const router = createRouter({ routeTree });
  const mdxRoutes =
    router.routesByPath["/docs/$slug"].options.staticData?.slugs?.map(
      (slug) => `/docs/${slug}`,
    ) ?? [];
  const routes = ["/", ...mdxRoutes];

  for (const route of routes) {
    const html = renderToString(/** what to do */);

    const outputPath = path.join(
      "dist",
      route === "/" ? "index.html" : `${route}/index.html`,
    );

    await fs.mkdir(path.dirname(outputPath), { recursive: true });
    await fs.writeFile(outputPath, html);
  }
}

build().catch(console.error);


If you have any thought about this, I really appreciate it. Thank you!
Was this page helpful?