How to deal with a remote translation?

[NurdinDev]

I'm dealing with a CMS that gives me all the translation dynamically via API, how to deal with this type of translation file if the file does not exist in the local directory?

My mind telling me to fetch the translation JSON as is, and find a way to save it in my local directory, but I don't have the right answer for this case.

Thanks in advance.

[aralroca]

Did you try something like this?

const fetch = require('isomorphic-unfetch')
// ...
{
  // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    fetch(`${API_URL}/myTranslationsFiles/${lang}/${ns}`).then((r) => r.json()),
}

[NurdinDev]

I created a node script to fetch my JSON words and store them inside the locales directory :D

[nraptis1978]

I have 2 questions:

1. What if I want to update the translations from my CMS. How the json files will be updated ? I see that you created a script the updates the files. how do you run this script ?
2. When using the translations on a page that have SSG I don't think that the content will be updated with new translations even if the locales/en .... json files are changed

[aralroca]

It's using the loader of the page. SSG -> is calling loadLocaleFrom inside getStaticProps. SSR -> is calling loadLocaleFrom inside getInitialProps / getServerSideProps.

https://github.com/vinissimus/next-translate/blob/a68ad2b9b87be627b7024f8e35867c444ff439d8/src/plugin/templateWithLoader.ts#L91

Is updated if you provide the Next.js revalidate prop: https://nextjs.org/docs/api-reference/data-fetching/get-static-props#revalidate

[nraptis1978]

Hi, I've tested this and seems to be working fine with getStaticProps and revalidate on a page. I'm using
loadLocaleFrom: (lang, ns) => fetch(${apiUrl}/${lang}).then((res) => res.json());

What if I have 20 pages with revalidate = "1 hour" and they share the same translations and there is no namespace. I mean that I have 1 api call for all translations of all 20 pages per lang. If I add getStaticProps and revalidate on all pages it will trigger 20 times the same api call per hour ( or not ? ). Can somehow make this to 1 api call ? i.e. update the translations only in 1 page and share it across all others ?

[nraptis1978]

I created a node script to fetch my JSON words and store them inside the locales directory :D

I've try this and even though I have in my pages getStaticProps with revalidate and on i18n.js this:
loadLocaleFrom: (lang, ns) =>
import(./locales/${lang}/common.json).then((m) => m.default),

when I'm updating the translations inside the common.json there is no update in the pages...