Question related to loading translations

[AndreiMaelstrom]

Hello,

I've been browsing through documentation and online resources but didn't manage to figure out a way of loading the translations on the server-side (so that they get rendered through SSR). My use case is that my translations are coming from an API that is only meant to be accessible from local network, and these translations need to be dynamic (i.e i cannot generate them statically as json files). At the moment all the solutions that i tried do call the API on the client side, or generate hydration issues (different translation on client vs server). What I would like to achieve essentially is to load all the translations per language/locale from my API when the Nuxt application is started. Any help would be highly appreciated.

Thanks,
Andrei

[kazupon]

This is a question, not issue, so We will move to Github Discussions.

[kazupon]

I think you can achieve your wish by combining lazy loading and fetch.
See about docs:
https://v8.i18n.nuxtjs.org/guide/lazy-load-translations

[AndreiMaelstrom]

Thank you for moving the thread and getting back.

I've tried it in the following ways:

1. Using a server plugin, problem is that I'm getting hydration issues with this way:

// plugins/i18n.server.ts
export default defineNuxtPlugin(async (nuxtApp) => {
    const {find} = useStrapi();

    console.log("Running i18n plugin");

    const {data, pending, refresh, error} = await useAsyncData(
        'translation-' + languageToLocale(nuxtApp.$i18n.locale.value),
        async () => find<Translation>('translations', {
            locale: languageToLocale(nuxtApp.$i18n.locale.value),
            populate: '*',
        }),
    );

    const response = data.value;

    let translationObject: any = {};

    for await (const element of response?.['data']) {
        translationObject[element.attributes.label] = element.attributes.value;
    }

    console.log(translationObject);

    nuxtApp.$i18n.mergeLocaleMessage(localeToLanguage(languageToLocale(nuxtApp.$i18n.locale.value)), translationObject);
});

2. Using the lazy-load feature, through a file:

// lang/en-US.ts
export default defineI18nLocale(async (locale) => {
    const {find} = useStrapi();

    let translations: any = {};

    const {data, pending, refresh, error} = await useAsyncData(
        'translation-' + languageToLocale(locale),
        async () => find<Translation>('translations', {
            locale: languageToLocale(locale),
            populate: '*',
        })
    );

    const response = data!.value;

    if (response) {
        for (const element of response['data']) {
            translations[element['attributes']['label']] = element['attributes']['value'];
        }
    }

    return translations;
});

The issue with the second approach is that the request is performed in the browser, so my API gets called in the browser.

Could you advise on a way to perform the API call only on the server side?

Thanks