Nuxt•2mo ago

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! 😊

6 Replies

kapa.ai•2mo ago

Hi @Pikawshh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your questions about loading translation dictionaries from Strapi into Nuxt's i18n configuration efficiently, let's break down the best practices based on the available knowledge sources: 1. Nuxt Plugin Reload Behavior: - Nuxt plugins typically run once during the server-side rendering (SSR) and once on the client-side when the application is hydrated. This means that your plugin will not reload on every client request but will execute during the initial load of the application. 2. Caching Strategy: - To avoid redundant API calls, you can leverage caching mechanisms. In Nuxt 3, you can use getCachedData to cache data on the client-side, which can help prevent unnecessary requests. This feature was introduced in Nuxt 3.8 and allows you to cache data until a hard reload or based on a custom TTL logic. Unfortunately, the specific implementation details for getCachedData are not provided in the extracts, but you can explore more about it in the Nuxt 3 documentation. 3. Loading and Merging Translations: - Your current approach of using a Nuxt plugin to load and merge translations into nuxt-i18n dynamically is valid. However, ensure that you handle the data fetching efficiently to avoid performance bottlenecks. Using useAsyncData or useFetch can help manage data fetching during SSR, ensuring that the data is available before the page is rendered. 4. Server-Side Loading: - Loading translations on the server during SSR can be beneficial as it reduces the load on the client and ensures that translations are available immediately when the page is rendered. You can use useAsyncData to fetch translations during SSR. This approach ensures that the data is fetched once and reused during hydration, avoiding repeated requests. For more detailed guidance on data fetching and caching strategies, you can refer to the Nuxt documentation on data fetching and explore caching options in the Nuxt 3.8 release notes. If you have further questions or need more specific examples, feel free to ask! 😊 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@612280800997539881> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

manniL•2mo ago

I'd probably do it on the server-side only and use $fetch there and maybe an API endpoint that ensures caching "in nuxt" itself

PikawshhOP•2mo ago

Hi @TheAlexLichter, thanks for your answer! So, if I understand correctly, I need to create a file under /server/api/myFile.ts, where I’ll make the GraphQL request to fetch the translations. Then, I will call this route inside my Nuxt plugin. Do you think this two-step approach (making the API call in /server/api/ and then calling it from the plugin) could cause any issues, or is it a good solution? Also, I’m experimenting with Pinia to store the translation data, but I’m not sure if it's the best approach. Would it make sense to store the translations in Pinia, or is there a better solution?

gabrielstuff•2mo ago

I love Pinia for debugging and state management. I use it a lot. i18n already store the translation so why would you need a complementary store to only "store" the key / value pair ?

manniL•2mo ago

not necessarily you can do this:

// plugins/abc.server.ts
import getDictionary from '~/queries/dictionary.gql';

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

  const data = await $fetch(); // somehow here do a GQL fetch call
  
  if (data?.dictionary?.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});

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

// plugins/abc.server.ts
import getDictionary from '~/queries/dictionary.gql';

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

  const data = await $fetch(); // somehow here do a GQL fetch call
  
  if (data?.dictionary?.translate) {
    const translations = data.value.dictionary.translate.reduce((acc, item) => {
      acc[item.key] = item.value;
      return acc;
    }, {});

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

Gaming

Programming

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

Did you find this page helpful?