Partially disable SSR

[flodaniel]

We are looking to migrate a big codebase to tanstack/router and would love to also start using tanstack/start to enable SSR.
Due to the size of the codebase we would like to disable SSR for most of our current code and only use it for anything new we add.

I have tried to find anything about this in the docs and on github, but I could not find a related option to configure a route (and all subroutes) to be excluded from SSR.

Is there an undocumented config option or a good way to achieve this?

[schiller-manuel]

you can set ssr: false for routes you don't want to SSR

[LukasFritzeDev]

This is working for the component rendering itself, but the loader is still executed on the server if using @tanstack/react-start.

Having this Route:

// app/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import { z } from "zod";
import { zodValidator } from "@tanstack/zod-adapter";
import { getProfiles } from "../actions/profile.ts";
import { NoProfiles } from "../components/list/noProfiles.tsx";
import { ProfilesList } from "../components/list/profilesList.tsx";

const QueryParams = z.object({
  contextId: z.string(),
});

export const Route = createFileRoute("/")({
  component: Home,
  validateSearch: zodValidator(QueryParams),
  ssr: false,
  loader: async (ctx) => {
    console.log("loader executed");
    const contextId = ctx.location.search.contextId;
    // this must be executed client side
    return getProfiles({ data: contextId });
  },
});

function Home() {
  console.log("component rendered");

  const profiles = Route.useLoaderData();

  const hasProfiles = !!profiles && profiles.length > 0;

  return (
    <>
      <h1>
        A11y Checker
      </h1>
      {hasProfiles ? <ProfilesList profiles={profiles} /> : <NoProfiles />}
    </>
  );
}

the log message

• component rendered is logged only on the client (the browser dev tools)
• loader executed is printed only on the server side, not on the client
  • I’d expect that the loader function is executed only on the client side as well

Having ssr: false removed or set to true, component rendered is logged on both sides.

Is there a built-in option to execute loaders to fix this?

---

Why must the code be executed client side?

The called server function uses a middleware with a client method. Inside the client method, code is executed to retrieve a session token. This is done in an iFrame context via Window Messages and these can only work in the client browser context.

Since the middleware client method is also executed server side during SSR, my attempt is to disable SSR for routes that use such functions. Another option would be to disable SSR completely, but I didn’t find any documentation on how to do this with @tanstack/start either.

[LukasFritzeDev]

My current workaround is to return null in the loader if executed server side and invalidate the router using useEffect:

export const Route = createFileRoute("/")({
  component: Home,
  ssr: false,
  loader: async (ctx) => {
    // check if executed not in browser context
    if (typeof window === "undefined") {
      return null;
    }
    // ...
  },
});

function Home() {
  const profiles = Route.useLoaderData();
  const router = useRouter();

  useEffect(() => {
    router.invalidate({ sync: true });
  }, []);

  // ....

Not that pretty, but functional.