[Start]: How to separate client and server routers?

[josippapez]

I've just updated to the latest version from 1.132.23 to 1.132.47 and since then, the ssr.tsx setup changed. Before, i could defined the createRouter in the ssr.tsx like this:

function createRouter() {
  const queryClient = new QueryClient();

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: {
        queryClient,
        prepareFirebase: async () => {
          const authToken = getCookie(USER_AUTH_KEY);
          firebaseServerApp.setServerAppToken(authToken);
          await firebaseServerApp.getServerAuth().authStateReady();
        },
        currentFirebaseUser: () => {
          return firebaseServerApp.getServerAuth().currentUser;
        },
        isAuthenticated: () => {
          return Boolean(getCookie(USER_AUTH_KEY));
        },
      },
      defaultPreload: 'intent',
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
      InnerWrap: ({ children }) => (
        <StrictMode>
          <Providers>{children}</Providers>
        </StrictMode>
      ),
    }),
    queryClient
  );
}

export default createStartHandler({
  createRouter,
})(defaultStreamHandler);

but now the signature has changed and the ssr.tsx needs to only export the handlers like fetch.

Personally, I think that the previous way of defining routers was way more intuitive since it doesn't abstract the creation of router to one place and adding if cases everywhere to satisfy the server side checks.

I've managed to partially make it work like this:

const getCookieSafe = createServerOnlyFn(() => {
  return getCookie(USER_AUTH_KEY);
});

export function getRouter() {
  const store = createStore();
  const auth = getAuth(firebase);

  // const DynamicMotion = lazy(() =>
  //   import("framer-motion").then(module => ({
  //     default: module.LazyMotion,
  //   }))
  // );

  const router = createTanStackRouter({
    routeTree,
    context: {
      queryClient: queryClient,
      prepareFirebase: async () => {
        if (isServer) {
          const authToken = getCookieSafe();
          firebaseServerApp.setServerAppToken(authToken);
          return await firebaseServerApp.getServerAuth().authStateReady();
        }
        return await auth.authStateReady();
      },
      currentFirebaseUser: () => {
        if (isServer) {
          return firebaseServerApp.getServerAuth().currentUser;
        }
        return auth.currentUser;
      },
      isAuthenticated: () => {
        if (isServer) {
          return Boolean(getCookieSafe());
        }
        return Boolean(auth.currentUser);
      },
    },
    defaultPreload: 'intent',
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () => <NotFound />,
    scrollRestoration: true,
    Wrap: ({ children }) => (
      <StrictMode>
        {/* <DynamicMotion
        features={() => import("framer-motion").then(res => res.domMin)}
        strict
      > */}
        <Provider store={store}>{children}</Provider>
        {/* </DynamicMotion> */}
      </StrictMode>
    ),
    InnerWrap: ({ children }) => (
      <AuthProvider>
        <Providers>{children}</Providers>
      </AuthProvider>
    ),
  });

  setupRouterSsrQueryIntegration({ router, queryClient });

  return router;
}

But still, it's not the same behaviour as before

[schiller-manuel]

how about

export const getRouter = createIsomorphicFn().server(() => {
    // create server side router
})
.client(() => {
   // create client side router
})

[josippapez]

Thanks for the suggestions @schiller-manuel. I didn't know that function existed, that's much better.