Extra HTTP requests about i18next-http-backend HOT 22 CLOSED

btw: if you don't like to have a fallbackLng... try to set it explictly to false

from i18next-http-backend.

Well. I will reinstall all my libraries, re-read the documentation again and try to figure out the cause of this problem. Perhaps this problem is from my side.
Probably should close this issue?

Thank you very much for your help and for 3 hours of your time!

from i18next-http-backend.

I think yes

from i18next-http-backend.

Check the url of the double requests, I'm pretty sure they're not the same.
Probably one is ru and the other ru-RU

from i18next-http-backend.

@adrai In the video everything is as I described

from i18next-http-backend.

If you set debug to true, you'll probably see, that ru is loaded anyway, because it's your fallbackLng and because the languageDetector detected your language ua, it will change the language to ua and load it accordingly.

from i18next-http-backend.

@adrai
fallbackLng is set to avoid errors in i18n. But this is not important either, because I will receive data from the path
http://localhost:3000/locales/dev/* if you do not specify it

An extra request still occurs

from i18next-http-backend.

the fallbackLng will always be loaded

from i18next-http-backend.

The fallbackLng content is used, if there is a missing key in the current language

from i18next-http-backend.

Yes. And it must be specified to avoid such an error:

It is impossible not to specify it at the first start

But there is still an additional request to http://localhost:3000/locales/dev/* if you do not specify it.
I have no questions for this, the question is only in unnecessary http requests, it turns out that the backend does not take into account the detector data if there is one

from i18next-http-backend.

ua comes from your detector and ru because it's the fallback

if you have other issues I would suggest you create a reproducable codesandbox example

from i18next-http-backend.

The documentation has a great example!
https://github.com/i18next/react-i18next/tree/master/example/react

If you run this, it will take the same behavior in the described problem :)

from i18next-http-backend.

And this is the expected behaviour.
fallbackLng is always loaded

from i18next-http-backend.

Let me try to describe the issue from a different angle.
That's right, it always boots, but in the case of a cold start
anyway, unnecessary requests occur.

It is strange why i18next-http-backend does not consider data received from the detector that was previously saved.

So it conflicts with the whole i18next-http-backend, try to run the example with clean cache and cleaned data in local storage. And you will get an error at every t("transl.example") without fallbackLng

from i18next-http-backend.

That's right, it always boots, but in the case of a cold start

What is a cold start?

i18next-http-backend does not consider data received from the detector that was previously saved

There is no data received from the detector, the detector only saves the language (not the content)
i18next-http-backend is just a backend plugin, it does not know when to load what and why... i18next is responsible to trigger the backend plugin. Btw. if your backend sets some Control-Cache headers the browser will cache them automatically.

try to run the example with clean cache and cleaned data in local storage. And you will get an error at every t("transl.example") without fallbackLng

I don't get any error...

from i18next-http-backend.

https://www.i18next.com/principles/fallback

from i18next-http-backend.

I have read all related documentations
cold start - by these words I mean that you start the site without a cache and there is no data in local storages (cookie localStorage). For example, the very first launch of the application.

And if fallbackLng is not specified or set to false. You will get t('title') in html tag (for example) and not its value.
fallbackLng: false- solves the problem in half
Maybe my English is to blame? I don't know how to explain it otherwise :(

from i18next-http-backend.

Sorry, I can't help you more than that... if setting fallbackLng = false does not help, I don't see anything else I can do...
All the examples I checked so far, work as expected and loads accordingly.
So by default i18next always loads the fallbackLng no matter if the current language is different or not.
The general behaviour I tried to explain here:

There is no data received from the detector, the detector only saves the language (not the content)
i18next-http-backend is just a backend plugin, it does not know when to load what and why... i18next is responsible to trigger the backend plugin. Btw. if your backend sets some Control-Cache headers the browser will cache them automatically.

I'm sorry.

from i18next-http-backend.

Ok, last chance.
If you have the opportunity, try the following steps:

• Set fallbackLng: false
• Run app
• Open DevTools then go to 'Application' -> 'Storage' and pres "Clear Site data" button.
  *This is how you simulate the very first connection
• Reload the page
• See if all i18n.t() are working correctly?

Btw. After switching the language, you really get only the files you need that correspond to the current {lng} from loadPath without unnecessary http requests.

from i18next-http-backend.

all fine, everything working correctly

from i18next-http-backend.

I solved my problem ✨✨✨.
If fallbackLng is not specified or is false, then the i18n.language variable will be undefined, which in turn will result in invalid data in i18n.t().
And this is the correct behavior inherent in the react-i18next library.

Solve the problem of i18n.t() and unnecessary requests by triggering the i18n.changeLanguage() function from outside. Thus, we overwrite the value undefined and based on this, the back-end will receive the code of the current language and give only the necessary localization files.

In this case, the i18n options must contain:

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    initImmediate: false,
    fallbackLng: false,
 })

Then, at the top level of the application, you can set the value of the i18n.language variable.

useEffect(() => {
    if (!i18n.language) {
      i18n.changeLanguage(lang)
      return
    }

    setCurrent(i18n.language)
}, [i18n.language])

from i18next-http-backend.

So this issue can be closed now?

from i18next-http-backend.