react-i18next：如何同步浏览器和Express LanguageDetector？

Question

In my server's routes, I do something like this (Note: The i18next-express-middleware is already in the pipeline, and Server Side Rendering is working good):

export default function (req, res) {
  const lng = req.language.toUpperCase()

  console.log(lng) // Always display [EN]

  MyModel
    .findOne(query, { fieldEN: 1, fieldFR: 1 })
    .exec()
    .then(res => reply(res[`field${lng}`]))
    .catch(err => handle(err))
}

So I try to return the right version of the field, base on the USER's selected language.

But no matter what language is selected on the browser side, on the server side it is always set to the default, EN.

Is there a way to let the server side LanguageDetector know about the current language on the browser side ?

This is my Client i18n init :

import i18n from 'i18next'
import Backend from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    whitelist: ['en', 'fr'],
    fallbackLng: 'en',
    preload: ['en', 'fr'],

    // debug: true,

    interpolation: {
      escapeValue: false
    },

    ns: ['home', 'channel', 'common'],
    defaultNS: 'home',

    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },

    react: {
      wait: true,
      bindI18n: 'languageChanged loaded',
      bindStore: 'added removed',
      nsMode: 'default'
    }
  })

export default i18n

And this is my server i18n init :

import i18n from 'i18next'
import Backend from 'i18next-node-fs-backend'
import { LanguageDetector } from 'i18next-express-middleware'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    whitelist: ['en', 'fr'],
    fallbackLng: 'en',
    preload: ['en', 'fr'],

    // debug: true,

    interpolation: {
      escapeValue: false
    },

    ns: ['home', 'channel', 'common'],
    defaultNS: 'home',

    backend: {
      loadPath: `${__dirname}/public/locales/{{lng}}/{{ns}}.json`,
      jsonIndent: 2
    }
  })

export default i18n

Answer 1

Guess issue on github https://github.com/i18next/react-i18next/issues/471 gives the answer...

And no stackoverflow...i won't write the full reply here again ;)

With code pasted here it will / should work...but reading above issue - there is a missing piece - creating a new instance (beside the one getting in req) and setting the language there -> leads to desync if relying on detection and not setting initialLanguage right...

Answer 2

In fact the issue was not my i18n init config.

When doing SSR, we must keep in mind that we have two distinct instances of i18next , one running on the server, and the other in the browser.

On the instance that you create on the server, the current language will be detected base on your config. Then you will render on the server, with something like this:

<I18nextProvider i18n={i18n_}>
    <StaticRouter location={req.url} context={{}}>
        <Route component={App} />
    </StaticRouter>
</I18nextProvider>

But when your browser app will launch, it will use whatever it will detect as the current language from its own config.

So the first thing to do, is to initialize the browser app with i18n info from the server. So when building the markup server side, just create two properties on window object to hold initialStore and initialLanguage (Note: I use hbs ):

window.__initialI18nStore__ = {{json initialI18nStore}}
window.__initialLanguage__ = {{json initialLanguage}}

Then on the browser app, you will render with something like this:

<I18nextProvider
    i18n={i18n}
    initialI18nStore={window.__initialI18nStore__}
    initialLanguage={window.__initialLanguage__}
  >
      <BrowserRouter>
          <Route component={App} />
      </BrowserRouter>
</I18nextProvider>

So the browser app will use the same language and store from the server.

But you are not done yet. Initializing the browser app with the same language don't link both instances of i18next, if you change the language on the browser, and press refresh, you will still have the previous language, coming from the server, because the server instance of i18next is not aware of the change you did.

The thing that fix all this is the caches setting, for the LanguageDetector . You have to specify it on both config, browser and server:

detection: {
  caches: [..., 'cookie', ...]
}

When you use the cookie for example, then each time the browser change the language, the cookie will be updated, and then on the server side, the behavior of the Language detector will be altered, it will first try to get the current language from the cookie, and set it as req.i18n.language . So both instance will now be in sync through that cookie.

May be you should read the example razzle-ssr on react-i18next github repo, and check these links to learn more about LanguageDetector options: for browser and for node