Cache issue with localization files React-i18next

Question

I am using react and react-i18next for the localization of my app. The issue is that after updating localization files. Sometimes an old version of my json files are cached in the browser. It could be solved if the user clean the cache but I can't rely on users to know how to clear the cache. JSON files are under public\locales.

I just figured out how to disable the cache in i18next translation.json files

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      requestOptions: {
        cache: 'no-store',
      },
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

It is not an ideal solution. The better solution - translations files need to be retrieved fresh after each build. But now this does not happen, such a feeling that hash is not added to translation files How to prevent cache after a new build?

Answer 1

You can use the version from package.json in the file request parameters. It is not a fact that translations will be changed in each release, but it is definitely better than disabling the cache or not updating it

backend: {
    loadPath: `/locales/{{lng}}/{{ns}}.json?version=${version}`
}