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

Hey so i've been facing this weird issue, using Inertia's InfiniteScroll component and Inertia::scroll() method. On every odd direct visit to the page it only loads first page and nothing else and on every even visit it works. To make sure that nothing on my page was causing it i set up a test route with very simple Test page and still same results. here's the code for my test page which is almost identical to InertiaJS doc examples

Route:

Route::get('/test', function(){
    return Inertia::render('Test',
        ['posts' => Inertia::scroll(PostResource::collection(Post::paginate(12)))]
    );
});

Test.jsx:

import { InfiniteScroll } from "@inertiajs/react";

export default function Test({ posts }) {
    return (
        <>
            <div className="container">
                <InfiniteScroll data="posts">
                    {posts.data.map((post) => (
                        <div key={post.id} className="my-24">
                            {post.title}
                        </div>
                    ))}
                </InfiniteScroll>
            </div>
            <div className="container">Temp Footer</div>
        </>
    );
}

even in this barebones version of code it acts exactly the same way. first visit no infinite scroll, second visit it mysteriously works, third - poof infinite scroll is gone.

i checked the github and couldn't find any issue similar to mine and wanted to double check before raising a new one.

I am running laravel herd for local dev, with following:

• php: 8.3
• laravel: 12.32.5
• react: 19.2
• inertiajs: 2.2.15 (updated to latest to see if it would fix the issue)