T
TanStack•4w ago
deep-jade

SPA mode still server rendering even with prerendering disabled

Hey, I'm having a difficult time getting tanstack start to work in a completely SPA like way. I am migrating a previous tanstack router app to tanstack start but it just seems to have a hard time NOT using the server. I've read all the SPA guides and done every as suggested but it still keeps getting stuck on certain local storage or context usages. Any help is much appreciated!
6 Replies
deep-jade
deep-jadeOP•4w ago
It feels like there are many places in the codebase to say "don't use ssr" and I've tried them all. My shellComponent: RootDocument in the __root is just the basic recommended root document. I created a start.ts with 
export const startInstance = createStart(() => ({
  defaultSsr: false,
}));
export const startInstance = createStart(() => ({
  defaultSsr: false,
}));
My vite config looks like: 
const config = defineConfig({
  plugins: [
    nitroV2Plugin(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: false,
        },
      },
    }),
    viteReact(),
  ],
});
const config = defineConfig({
  plugins: [
    nitroV2Plugin(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: false,
        },
      },
    }),
    viteReact(),
  ],
});
rotten-yellow
rotten-yellow•4w ago
in the same boat with the same options currently. My child routs are still throwing Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. I'm also seeing: 
declare module '@tanstack/react-start' {
  interface Register {
    ssr: true
    router: Awaited<ReturnType<typeof getRouter>>
    config: Awaited<ReturnType<typeof startInstance.getOptions>>
  }
}
declare module '@tanstack/react-start' {
  interface Register {
    ssr: true
    router: Awaited<ReturnType<typeof getRouter>>
    config: Awaited<ReturnType<typeof startInstance.getOptions>>
  }
}
in routeTree.gen.ts obvously this is just a type, but it does seem to conflict with the options I have set
rotten-yellow
rotten-yellow•4w ago
@Matt Kinnersley your milage may vary, but I was able to fix this using the following: https://tanstack.com/start/latest/docs/framework/react/guide/selective-ssr#how-to-disable-ssr-of-the-root-route
Selective Server-Side Rendering (SSR) | TanStack Start React Docs
What is Selective SSR? In TanStack Start, routes matching the initial request are rendered on the server by default. This means beforeLoad and loader are executed on the server, followed by rendering...
deep-jade
deep-jadeOP•4w ago
Yeah gave it a go, unfortunately I've just had to rearchitect my app a bit Thanks though
rotten-yellow
rotten-yellow•3w ago
@Matt Kinnersley what did you end up having to do? I think my app is still using SSR
deep-jade
deep-jadeOP•3w ago
So my main issue was that my router.tsx had some useContext in it, so I had to remove that and pass that into the router later. The setting in vite config + making sure the shell component were barebones make it usable Overall it feels a bit difficult to get working though and I still get some odd type errors

Did you find this page helpful?