solidjs · birkskyum · Mar 3, 2025 · Mar 1, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/.changeset/shy-rivers-punch.md b/.changeset/shy-rivers-punch.md
@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+get ssr working for tanstack router example
diff --git a/examples/with-tanstack-router/app.config.ts b/examples/with-tanstack-router/app.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from "@solidjs/start/config";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 
 export default defineConfig({
-  ssr: false,
   vite: {
     plugins: [TanStackRouterVite({ target: "solid" })]
   }

diff --git a/examples/with-tanstack-router/src/app.tsx b/examples/with-tanstack-router/src/app.tsx
@@ -1,23 +1,8 @@
-import { RouterProvider, createRouter } from "@tanstack/solid-router";
-import { routeTree } from "./routeTree.gen";
+import { router } from "./router";
+import { RouterProvider } from "@tanstack/solid-router";
 
 import "./app.css";
 
-const router = createRouter({
-  defaultErrorComponent: (err) => <div>{err.error.stack}</div>,
-  routeTree,
-  defaultPreload: "intent",
-  defaultStaleTime: 5000,
-  scrollRestoration: true
-});
-
-// Register things for typesafety
-declare module "@tanstack/solid-router" {
-  interface Register {
-    router: typeof router;
-  }
-}
-
 export default function App() {
   return <RouterProvider router={router} />;
 }
diff --git a/examples/with-tanstack-router/src/entry-client.tsx b/examples/with-tanstack-router/src/entry-client.tsx
@@ -1,4 +1,4 @@
 // @refresh reload
-import { mount, StartClient } from "@solidjs/start/client";
+import { mount, StartClientTanstack } from "@solidjs/start/client";
 
-mount(() => <StartClient />, document.getElementById("app")!);
+mount(() => <StartClientTanstack />, document.getElementById("app")!);
diff --git a/examples/with-tanstack-router/src/entry-server.tsx b/examples/with-tanstack-router/src/entry-server.tsx
@@ -1,21 +1,40 @@
 // @refresh reload
-import { createHandler, StartServer } from "@solidjs/start/server";
+import { createHandler, FetchEvent, StartServer } from "@solidjs/start/server";
+import { createMemoryHistory } from "@tanstack/solid-router";
+import { router } from "./router";
 
-export default createHandler(() => (
-  <StartServer
-    document={({ assets, children, scripts }) => (
-      <html lang="en">
-        <head>
-          <meta charset="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-          {assets}
-        </head>
-        <body>
-          <div id="app">{children}</div>
-          {scripts}
-        </body>
-      </html>
-    )}
-  />
-));
+const routerLoad = async (event: FetchEvent) => {
+  const url = new URL(event.request.url);
+  const path = url.href.replace(url.origin, "");
+
+  router.update({
+    history: createMemoryHistory({
+      initialEntries: [path]
+    })
+  });
+
+  await router.load();
+};
+
+export default createHandler(
+  () => (
+    <StartServer
+      document={({ assets, children, scripts }) => (
+        <html lang="en">
+          <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <link rel="icon" href="/favicon.ico" />
+            {assets}
+          </head>
+          <body>
+            <div id="app">{children}</div>
+            {scripts}
+          </body>
+        </html>
+      )}
+    />
+  ),
+  undefined,
+  routerLoad
+);
diff --git a/examples/with-tanstack-router/src/router.tsx b/examples/with-tanstack-router/src/router.tsx
@@ -0,0 +1,22 @@
+import { createRouter as createTanstackSolidRouter } from "@tanstack/solid-router";
+import { routeTree } from "./routeTree.gen";
+
+export function createRouter() {
+  const router = createTanstackSolidRouter({
+    defaultErrorComponent: err => <div>{err.error.stack}</div>,
+    routeTree,
+    defaultPreload: "intent",
+    defaultStaleTime: 5000,
+    scrollRestoration: true
+  });
+  return router;
+}
+
+export const router = createRouter();
+
+// Register things for typesafety
+declare module "@tanstack/solid-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}
diff --git a/packages/start/src/client/StartClient.tsx b/packages/start/src/client/StartClient.tsx
@@ -24,3 +24,13 @@ export function StartClient() {
     </Dummy>
   );
 }
+
+export function StartClientTanstack() {
+  return (
+    <Dummy>
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
+    </Dummy>
+  );
+}
diff --git a/packages/start/src/client/index.tsx b/packages/start/src/client/index.tsx
@@ -1,5 +1,5 @@
 // @refresh skip
 import "vinxi/client";
-export { StartClient } from "./StartClient";
+export { StartClient, StartClientTanstack } from "./StartClient";
 export { mount } from "./mount";
 
diff --git a/packages/start/src/client/spa/index.tsx b/packages/start/src/client/spa/index.tsx
@@ -7,4 +7,4 @@ export function mount(fn: () => JSX.Element, el: MountableElement) {
   render(fn, el);
 }
 
-export { StartClient } from "../StartClient";
+export { StartClient, StartClientTanstack } from "../StartClient";
diff --git a/packages/start/src/server/handler.ts b/packages/start/src/server/handler.ts
@@ -31,18 +31,24 @@ export function getExpectedRedirectStatus(response: ResponseStub): number {
 export function createBaseHandler(
   fn: (context: PageEvent) => unknown,
   createPageEvent: (event: FetchEvent) => Promise<PageEvent>,
-  options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {}
+  options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {},
+  routerLoad?: (event: FetchEvent) => Promise<void>
 ) {
   return eventHandler({
     handler: (e: HTTPEvent) => {
       const event = getFetchEvent(e);
 
       return provideRequestEvent(event, async () => {
+        if (routerLoad) {
+          await routerLoad(event);
+        }
+
         // api
         const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method);
         if (match) {
           const mod = await match.handler.import();
-          const fn = event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
+          const fn =
+            event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
           (event as APIEvent).params = match.params || {};
           // @ts-ignore
           sharedConfig.context = { event };
@@ -62,6 +68,7 @@ export function createBaseHandler(
         const mode = resolvedOptions.mode || "stream";
         // @ts-ignore
         if (resolvedOptions.nonce) context.nonce = resolvedOptions.nonce;
+
         if (mode === "sync" || !import.meta.env.START_SSR) {
           const html = renderToString(() => {
             (sharedConfig.context as any).event = context;
@@ -130,7 +137,8 @@ function handleStreamCompleteRedirect(context: PageEvent) {
  */
 export function createHandler(
   fn: (context: PageEvent) => unknown,
-  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)
+  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>),
+  routerLoad?: (event: FetchEvent) => Promise<void>
 ) {
-  return createBaseHandler(fn, createPageEvent, options);
+  return createBaseHandler(fn, createPageEvent, options, routerLoad);
 }
diff --git a/packages/start/src/server/spa/handler.ts b/packages/start/src/server/spa/handler.ts
@@ -7,9 +7,10 @@ import { FetchEvent, HandlerOptions, PageEvent } from "../types";
  */
 export function createHandler(
   fn: (context: PageEvent) => unknown,
-  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)
+  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions),
+  routerLoad?: (event: FetchEvent) => Promise<void>
 ) {
-  return createBaseHandler(fn, createPageEvent, options);
+  return createBaseHandler(fn, createPageEvent, options, routerLoad);
 }
 
 export async function createPageEvent(ctx: FetchEvent) {