react-i18next CSR setup with over the wire translations

[ui-mattlucas]

Each of my pages is tagged with a distribution id that has a variety of languages. Currently, I am feeding that id to a function within (the mostly vanilla) i18n.js to await the resource and load the app.

This kind of works, but it seems like the ready method from useTranslation is always ready, even when there is no resource yet (language tag flickers from tag to language).

It also seems a bit suboptimal.

Is there an example of an app using a similar setup to this to get translations per page over the wire? I don't really have access to namespaces beforehand.

Or should I look into architecting some kind of lazy load with the http library to fetch these resources dynamically for each page?

Here's my i18n

    i18n
        .use(initReactI18next) // passes i18n down to react-i18next
        .init({
            resources: { [defaultLanguage]: { translation: resource }},
            lng: defaultLanguage, 
            interpolation: {
                escapeValue: false // react already safes from xss
            },
    });
    return i18n;
};


export const getLanguageAsset = async (distro) => {
    if (!distro) return false;

    // @todo map countries to languages with params from router
    let data = await fetch(`https://distributions.crowdin.net/${distro}/content/${languageMap[currentLanguage]}.json`)

    if(!data.ok){
        data = await fetch(`https://distributions.crowdin.net/${distro}/content/${defaultLanguage}.json`)
    }

    const responseData = await data.json();
    const resource = await responseData;
    if (resource) {
        i18next(resource);
    }
};

export default i18next();

I am a bit confused with the way this is initialized. Thanks!

[adrai]

Try this kind of approach: https://github.com/i18next/i18next-http-backend/tree/master/example/next#alternative-usage-the-preferred-way