nope, not really, did not have time to dig deeper into the issue, stuck with the "old school" method. haven't checked if maybe latest updates fixed it.

this was one of the solutions i tried and it does not eliminate the issue and the SSR still only renders in English and then gets hydrated with Georgian

Hi, i have run into the following issue after adding SSR support to my app, the server rendered html stays in English but later is hydrated with whatever user has selected. this causes slight flicker of text during refresh (and seo not indexing correct html). i have tried many solutions and none have solved the underlying problem.

in my Layout.jsx i have following code:

useEffect(() => {
        if (locale && locale !== i18n.language) {
            i18n.changeLanguage(locale);
        }
    }, [locale]);

if i remove this, only enlgish is loaded

my app.jsx looks like this:

createInertiaApp({
    title: (title) => (title ? `${title} - ${appName}` : appName),
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx"),
        ),
    setup: ({ el, App, props }) => {
        const locale = props.initialPage.props.locale;
        if (locale) {
            i18n.changeLanguage(locale);
        }
        hydrateRoot(
            el,
            <React.StrictMode>
                <App {...props} />
            </React.StrictMode>,
        );
    },
    progress: {
        color: "#4B5563",
    },
});

the ssr.jsx:

createServer((page) => {
    globalThis.Ziggy = page.props.ziggy;

    return createInertiaApp({
        title: (title) => (title ? `${title} - ${appName}` : appName),
        page,
        render: ReactDOMServer.renderToString,
        resolve: (name) => {
            const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
            return pages[`./Pages/${name}.jsx`];
        },
        setup: ({ App, props }) => {
            const Ziggy = {
                ...props.initialPage.props.ziggy,
                location: new URL(props.initialPage.props.ziggy.url),
            };

            const locale = props.initialPage.props.locale;
            if (locale) {
                i18n.changeLanguage(locale);
            }

            global.route = (name, params, absolute, config = Ziggy) =>
                route(name, params, absolute, config);

            return <App {...props} />;
        },
        progress: {
            color: "#4B5563",
        },
    });
});

and the i18n config:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en from "./Locales/en.json";
import ka from "./Locales/ka.json";

i18n.use(initReactI18next).init({
    resources: {
        en: { translation: en },
        ka: { translation: ka },
    },
    lng: "ka",
    fallbackLng: "ka",
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

what am i doing wrong here? any help is much appreciated