Help me understand how i18next-http-backend works and why it sends request for each namespace

[yaman3bd]

Hey,
I am using next-18next with i18next-http-backend and I am sending API calls to fetch the translations, but I found that the request is sent for each namespace in my config like if I have ["common", "titles"] it would send a request for each group and when I change the page and I have three namespaces like: ["common", "test", "home"] it will send request also for common it will not cache it, is this the expected behavior or is there something missing I have?

my config:

const backend = require("i18next-http-backend/cjs");
const { axios } = require("./lib/axios");

module.exports = {
  debug: false,
  i18n: {
    locales: ["ar"],
    defaultLocale: "ar"
  },
  use: [backend],
  backend: {
    loadPath: "{{lng}}|{{ns}}",
    request: async (options, url, payload, callback) => {
      try {
        const [lng, ns] = url.split("|");
        //it will logged for each namespace
        console.log("ns", ns);
        await axios
          .get("/translations", {
            params: { group: ns }
          })
          .then((response) => {
            callback(null, {
              data: response.data.data[lng][ns],
              status: 200
            });
          })
          .catch((error) => {
            console.log(error.response);
          });
      } catch (e) {
        callback(null, {
          status: 500
        });
      }
    }
  },
  reloadOnPrerender: true,
  serializeConfig: false
};

my page:

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale ?? i18nextConfig.i18n.defaultLocale, ["common", "titles"], i18nextConfig))
    }
  };
};

export default function Test() {
  const { t } = useTranslation();

  return (
    <div>
      {t("titles:blog")}

      <Link href="/">{t("common:test")}</Link>
    </div>
  );
}

[adrai]

For caching have a look at:

https://github.com/i18next/i18next-http-backend/blob/master/example/next/next-i18next.config.js

https://www.i18next.com/how-to/caching#server-side-next.js-caching-with-filesystem

[yaman3bd]

I am doing this already:

backends: isBrowser ? [LocalStorageBackend, HttpBackend] : [FSBackend, HttpBackend],

but I am getting the errors I have already mentioned:
Module not found: Can't resolve 'fs' when I use i18next-fs-backend
and I try to use only i18next-localstorage-backend:
Error: Default namespace not found at public/locales/ar/common.json
I want to load the translations from the database not from public dir

[adrai]

The require statement needs to be done after the isBrowser condition... directly in the uses array

[yaman3bd]

I have updated my config but still the same errors:

const ChainedBackend = require('i18next-chained-backend')

const HttpBackend = require('i18next-http-backend/cjs')

const {instance: axios} = require("./lib/axios");


const isBrowser = typeof window !== 'undefined'
const isDev = process.env.NODE_ENV === 'development'

const backendOptions = {
    loadPath: "{{lng}}|{{ns}}",
    request: async (options, url, payload, callback) => {
        try {
            const [lng, ns] = url.split("|");
            await axios.get("/translations", {
                params: {ns},
            }).then((response) => {
                callback(null, {
                    data: response.data.data[lng][ns],
                    status: 200
                });
            }).catch((error) => {
                console.log(error.response);
            });
        } catch (e) {
            callback(null, {
                status: 500
            });
        }
    }
}

const backend = {
    backends: [HttpBackend],
    backendOptions: [backendOptions]
};

if (isBrowser) {
    const LocalStorageBackend = require('i18next-localstorage-backend').default
    backend.backends.unshift(LocalStorageBackend)
    backend.backendOptions.unshift({
        expirationTime: 60 * 60 * 1000,
        prefix: 'i18next_res_'
    })
} else {
    const FSBackend = require('i18next-fs-backend/cjs')
    backend.backends.unshift(FSBackend)
    backend.backendOptions.unshift({
        expirationTime: 60 * 60 * 1000,
        loadPath: './public/locales_cache/{{lng}}/{{ns}}.json',
    })
}

module.exports = {
    debug: isDev,
    i18n: {
        locales: ["ar"],
        defaultLocale: "ar"
    },
    use: [ChainedBackend],
    ns: ["common"],
    backend,
    serializeConfig: false
};

here is an example repo could you please take a look and try to run the code and see what happens?

[adrai]

https://github.com/yaman3bd/local-test/pull/1/files

like here: https://github.com/locize/next-i18next-locize/tree/local-caching/next-i18next.config.js

[yaman3bd]

this is awesome, thanks really for helping me out achieving what I wanted.
but I have a few questions:

• I do not have the locales_cache dir in my project, and the keys are cached how does it work exactly?
• I have over 20 namespaces in my project and I do not need them all at once maybe the user won't visit a page that requires some namespaces so I did not include anything in ns: ['namespaces'] so do I have to make sure to preload the namespaces or only the most used namespaces like for example: common or I could leave it empty and load the namespaces as required on each page?

[adrai]

On server side I recommend to always load everything at start. Once loaded it will use the resources in memory for all sub-sequent requests.

[yaman3bd]

but loading everything at the start won't affect the initial time load for the page?
also, the API request is called for every namespace individually so sending 20 requests to the API will block me because I have a rate limit, so I thought of a workaround to add namespace ns: ['*'] so which means to load all the namespaces I have at the start and cache them, is there another way to do it? how would you recommend handling such scenarios?

[adrai]

We are talking about next-i18next and the server side part here... so the best way for that is to preload all languages and namespaces... because on subsequent requests all languages are already there an don't need to be loaded again...
But naybe I misunderstood something. 🤷‍♂️

PS. also read this section: https://github.com/i18next/next-i18next#5-declaring-locale-dependencies