Best practices for loading nuxt-i18n from an API / CMS

Hi everyone,
I'm working on a Nuxt 3 e-commerce project based on a MACH architecture. My goal is to load translation dictionaries from Strapi (CMS) into Nuxt's i18n configuration efficiently.

My setup:

1. The dictionary is stored in Strapi and accessed via GraphQL.
2. I query the dictionary through my BFF (Apollo Server), which serves as an intermediary between Nuxt and Strapi.
3. I load the translations dynamically in a Nuxt plugin and merge them into nuxt-i18n.

Here’s my current Nuxt plugin:

import getDictionary from '~/queries/dictionary.gql';

export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp();

  const { data } = await useAsyncQuery(getDictionary);
  
  if (data.value && data.value.dictionary && data.value.dictionary.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    
    console.log("translations", translations);

    $i18n.mergeLocaleMessage('fr', translations);
  } 
});

import getDictionary from '~/queries/dictionary.gql';

export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp();

  const { data } = await useAsyncQuery(getDictionary);
  
  if (data.value && data.value.dictionary && data.value.dictionary.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    
    console.log("translations", translations);

    $i18n.mergeLocaleMessage('fr', translations);
  } 
});

Questions:

Does the Nuxt plugin reload on every client request or only once on app initialization?
Since this is an e-commerce site, I don’t want to overload the client with unnecessary requests. What would be the best caching strategy to avoid redundant API calls?

Is this the right way to load and merge translations into nuxt-i18n dynamically?
Or is there a better way to inject these translations without affecting performance?

Would it be better to load translations on the server (during SSR) rather than on the client?
If so, how would I properly integrate that with nuxt-i18n?

Any advice or best practices would be greatly appreciated. Thanks in advance!

Best practices for loading nuxt-i18n from an API / CMS

import getDictionary from '~/queries/dictionary.gql';

export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp();

  const { data } = await useAsyncQuery(getDictionary);
  
  if (data.value && data.value.dictionary && data.value.dictionary.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    
    console.log("translations", translations);

    $i18n.mergeLocaleMessage('fr', translations);
  } 
});

import getDictionary from '~/queries/dictionary.gql';

export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp();

  const { data } = await useAsyncQuery(getDictionary);
  
  if (data.value && data.value.dictionary && data.value.dictionary.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});
    
    console.log("translations", translations);

    $i18n.mergeLocaleMessage('fr', translations);
  } 
});

Best practices for loading nuxt-i18n from an API / CMS

Best practices for loading nuxt-i18n from an API / CMS

Similar Threads

Similar Threads

Similar Threads