React-i18next: missingKey

[jerome-diver]

From a SSR Express/React web site in construction, i have big pain to just get translation on server side.
I get it in client side, but failed on server side (i don't use next.js). I do read source code for SSR there: official example with Razzle even if i don't use razzle.
I didn't find any example with just Express and React and API description is for last v9 of i18netx (i use the last one version 11).

I suggest to clarify and document better i18next (maybe little by little) for almost simplest cases who would be very helpful to any users.

Followed this thread issue (who is an ask for help) missingKey
there is last post talking about to use redy/tReady, but how can i magically know what is ready/tReady ? Where i can find manual for this (maybe API ?) to this "ready/tReady" (method|function|class what is it ?) to use ?
Any clue with that please ?

[jamuhl]

Did you check documentation?

https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

or for HOC: https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

[jerome-diver]

@jamuhl i read a lot of your documentation, but miss this point precisely. I feel myself confuse by the use of SSR and indication about this with specific v9 (but i don't know if it is only for this one or can be used for recent one version).

First point entry in my little brain storming...

Anyway, ""useTranslate" is a hook for React.js... so it is client side i think (by logic deduction, but tell me if i'm wrong with that). So, my problem is NOT client side (i get translation fine client side), but server side. Server side doesn't load translation files and i have no clue why. Maybe it is missing something from client to send back language selected from the ui, because it is this particular point who give me headhache... I would enjoy a lot to read an article about SSR deserve both server and client side i18next translation with Express and React to clearly explain the idea and how does it can happens.

I read this SSR with react-i18next of your documentation, but failed to well understand the use of initialI18nStore (who is then, i think, the content of json en/ns file in javascript vraiable) and initialLanguage (who is then the language code used, depend of load: 'languageOnly' or not for regional access or not) to pass.
This make me confuse about which relation to link between server side source code and client side one... It should (i think) pass these data required back to server side... but how ? which variable is really used to catch back from server side the data who has been sent ? i failed to understand this point.
Also on the same page, it is said that you can set lnstance (so i18n instance) based on "req" (who is request argument through http request fallback middleware i think). But then, it is to use inside a fetching route receipted... server side then ? It is missing some clarifications for me with that.

go ahead and rich a point from "debug" mode message

with debug true, i was missing crucial line indicates that it failed to load the translation files.
I failed to understand from which side the file has to be loaded (from the initial file it calls the option or from server running one ?)
So i tried some other possible answer and find to indicate a relative path from server running side as a public visible files to be configured (my code separate backend server side in "backend" named directory, and client side in 'frontend' directory. locales files are an other one directory on root. so i did indicate "../locales/en/translation.json" but it needs "./locales/en/translation.json" to be find.

next step to rich destination

Now i need to be able to really understand:

1. how to tell my server side that my client side changed language,

2. and also to store it the best way, maybe in cookie or localStorage anyway to get things stable and happened at next user connection.

thank you for your help by the way, i would like my experience to be useful for other if you want

There is so different options and possibilities to config things that i have difficulties to clearly target on my use case.
thank you for this indication, i'm going to look at this way.
Do you want that, if i finished by resolve my problem, to provide a link to a SSR with simple React.js frontend and Express.js backend with both side translation to contribute to add some missing example to your documentation ?

[adrai]

Maybe @Vadorequest knows more about SSR complexity...?

[Vadorequest]

Hey @jerome-diver! Yeah, writing an universal code that works both on the server and the client was complicated to me.

On Next.js, I needed to fetch the translations myself first, before loading my UI components that used t, <Trans translation helpers.

Here is what I wrote for Next.js, but it isn't next-specific, it should work with any universal framework.

https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/utils/i18n/i18nextLocize.ts

Usage:
https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/utils/nextjs/SSG.ts#L124

Regarding your questions, I don't know how to tell your backend when the locale changes on the frontend. But a full page refresh should work out. It also depends on how you detect the locale being used, it's easier when it's stored in the url (e.g: /en/about).

Personally, I write the i18next cookie (used by i18next) to store what locale is used by the end-user. I wrote another package universal-language-detector meant to work with any universal framework, to detect the locale being used by the user. It relies on i18next internally.

https://github.com/UnlyEd/universal-language-detector/blob/master/src/index.ts#L19

[jerome-diver]

Hi @Vadorequest and thank you very much to try to help me with that.

1. Yes, definitely i have to send a HTTP POST request from client side back to server side to update the language on server side when client does change it (i have a navigation bar with a dropdown link with flags... then when i do select a flag, i change the language.

2. I don't use parameters on address.

3. And yes, i will go to use cookies to store the language state client side.

4. @jamuhl I start also an proffessional activity and if i'm able to sale some web side code with that, i would like to support your work. I think it would be normal if i win something to use your code to next support your nice code by a retribution.

This thread, for me, seems to be resolved and can be close.

[jerome-diver]

thank you everybody for your help, i do appreciate it.