hydration issues with ssr handler

import type { AnyRouter } from "@tanstack/react-router";
import type { EventHandler } from "@tanstack/react-start/server";
import { getSession } from "@/lib/server/auth";
import type { QueryClient } from "@tanstack/react-query";

export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
    request: Request;
    router: TRouter;
    responseHeaders: Headers;
}) => Response | Promise<Response>;

export type CustomizeStartHandler<TRouter extends AnyRouter> = (
    cb: HandlerCallback<TRouter>,
) => EventHandler;

export function createBetterAuthHandler<TRouter extends AnyRouter>(
    startHandler: CustomizeStartHandler<TRouter>,
) {
    return (cb: HandlerCallback<TRouter>): EventHandler =>
        startHandler(async ({ request, router, responseHeaders }) => {
            const qc = router.options.context.queryClient as QueryClient;

            const session = await getSession();

            qc.setQueryData(["session"], session);

            // 4) stash session into router context
            router.update({
                context: {
                    ...router.options.context,
                    session,
                },
            });

            // 5) run through all loaders / beforeLoad
            await router.load();

            // 6) hand back to your normal handler (e.g. defaultStreamHandler)
            return cb({ request, router, responseHeaders });
        });
}

import type { AnyRouter } from "@tanstack/react-router";
import type { EventHandler } from "@tanstack/react-start/server";
import { getSession } from "@/lib/server/auth";
import type { QueryClient } from "@tanstack/react-query";

export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
    request: Request;
    router: TRouter;
    responseHeaders: Headers;
}) => Response | Promise<Response>;

export type CustomizeStartHandler<TRouter extends AnyRouter> = (
    cb: HandlerCallback<TRouter>,
) => EventHandler;

export function createBetterAuthHandler<TRouter extends AnyRouter>(
    startHandler: CustomizeStartHandler<TRouter>,
) {
    return (cb: HandlerCallback<TRouter>): EventHandler =>
        startHandler(async ({ request, router, responseHeaders }) => {
            const qc = router.options.context.queryClient as QueryClient;

            const session = await getSession();

            qc.setQueryData(["session"], session);

            // 4) stash session into router context
            router.update({
                context: {
                    ...router.options.context,
                    session,
                },
            });

            // 5) run through all loaders / beforeLoad
            await router.load();

            // 6) hand back to your normal handler (e.g. defaultStreamHandler)
            return cb({ request, router, responseHeaders });
        });
}

//ssr.tsx
export default createBetterAuthHandler(
    createStartHandler({
        createRouter,
        getRouterManifest,
    }),
)(defaultStreamHandler);

//ssr.tsx
export default createBetterAuthHandler(
    createStartHandler({
        createRouter,
        getRouterManifest,
    }),
)(defaultStreamHandler);