T
TanStack•7mo ago
vicious-gold

How can I disable SSR for the notFoundComponent?

I am trying to first migrate to start without SSR and then later on enable SSR. I am aware that the Root Route will always SSR but is there a way to register a default "notFoundComponent" and avoid any SSR on it? As soon as I add define a default not found component i get hydration errors.
1 Reply
vicious-gold
vicious-goldOP•7mo ago
A similar issue happens in a case like this: 
export const Route = createFileRoute("/_baseLayout/landing")({
    component: Landing,
    ssr: false,
    context: (ctx) => {
        const handle = {
            layoutOptions: {
                showTopNavigationBar: true,
                topNavigationProps: {
                    suffixSlot: <LanguageSelector variant={"compact"} updateOnSelection={true} />,
                },
            },
        };
        return { handle };
    },
});
export const Route = createFileRoute("/_baseLayout/landing")({
    component: Landing,
    ssr: false,
    context: (ctx) => {
        const handle = {
            layoutOptions: {
                showTopNavigationBar: true,
                topNavigationProps: {
                    suffixSlot: <LanguageSelector variant={"compact"} updateOnSelection={true} />,
                },
            },
        };
        return { handle };
    },
});
The line where the LanguageSelector is added causes a hydration error (due to some MUI theming I want to fix later on).

Did you find this page helpful?