React-i18next: Use local and backend translation together

[0FilipK]

Hello, I'm using old v9 i18next version currently and I'm wondering is it possible to use both: local and backend translations together? I'm trying to provide local resources and backend options in init but it doesn't work.

What I want to achieve is load local version as soon as possible to prevent ugly white screen (when only backend is configured and react.wait: true) and untranslated text also. I imagine this like loading local, then download the newest translation file from backend and rerender all components.

Can be done in newer - V10 version maybe?

[jamuhl]

you can use: https://github.com/i18next/i18next-chained-backend

like in https://github.com/i18next/i18next-localstorage-backend#getting-started as a sample for loading local data first...just replace the localstorage usage with your own way to access local files

sure possible...but you will need to get your hands dirty learning the internals of backend chaining

[jamuhl]

another option might be passing local as resources on init and calling reloadResources: https://www.i18next.com/overview/api#reloadresources

[0FilipK]

So if I'm correct should I use i18next-chained-backend combined with i18next-node-fs-backend to load json file from translations directory instead of i18next-localstorage-backend as in example?

[0FilipK]

@jamuhl I think it's not what I want to achieve. If I'm correct i18next-chained-backend works as provider to get one translation at once. For example If we use example like in https://github.com/i18next/i18next-localstorage-backend#getting-started it will try to load localstorage file and if it fails then try to ask backend for translation.

This is not what I want. I want to load local file AND in the background load another file - from backend. If there is any differences between translations it should use backend version.

I would like to get newest translations on app build and save them to local file, then use it as primary file to prevent blocking site render.

[jamuhl]

You can directly use the resourceStore - fill it as needed https://www.i18next.com/overview/api#resource-handling

As long you do not a electron or react-native app the idea of loading first translations "local" as part of the bundle and again from backend (xhr) is a bad idea in my opinion...but do what you like to do.

[0FilipK]

The main reason for trying to do this in that way is that i18next-xhr-backend with react.wait = true blocks all the UI until translations are fully loaded :/ First there is XHR for translations and then rest of app is rendering and makes calls to API for data. I would like to do this parallel but if I switch react.wait to false this is horrible for UX - page loads faster but there is untranslated strings until backend translations isn't loaded.

[jamuhl]

in v9 you can: https://react.i18next.com/legacy-v9/withnamespaces#sample -> use tReady -> if false show fallbackUI

in v10 you can use Suspense for that...

[jamuhl]

and bad UX -> do you show pseudo data in case you app did not yet load data? - guess you show some fallback UI saying something like "loading" -> do the same for translations...

[0FilipK]

@jamuhl

tReady is ok but our app is so huge right now and edit all of the components would be a killer and our "business" department won't accept that solution to show something like "loading" instead of real translations.

That's the reason why I'm looking for solution with loading local file and parallel backend.

[jamuhl]

Then the only option is building something custom around resourceStore API, or backend and resource reloading...as your "business" requests this...I'm rather sure they give you the time