ssr

src/entry-client.tsx

@@ -0,0 +1,11 @@
+import { hydrateRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./assets/main.css";
+import App from "./pages/App.tsx";
+
+hydrateRoot(
+  document.getElementById("root")!,
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);

src/entry-server.tsx

@@ -0,0 +1,17 @@
+import { renderToString } from "react-dom/server";
+import * as RouterExports from "react-router-dom";
+import App from "./pages/App";
+
+// Vite's SSR runner resolves react-router-dom to its CommonJS build, so the
+// named exports land on `.default`; fall back to the namespace when not.
+const { StaticRouter } =
+  (RouterExports as { default?: typeof RouterExports }).default ?? RouterExports;
+
+export function render(url: string) {
+  const html = renderToString(
+    <StaticRouter location={url}>
+      <App />
+    </StaticRouter>,
+  );
+  return { html };
+}

src/main.tsx

@@ -1,15 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import "./assets/main.css";
-import App from "./pages/App.tsx";
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-]);
-
-createRoot(document.getElementById("root")!).render(
-  <RouterProvider router={router} />
-);