useSSR for different requests

[nassimbenkirane]

Describe the bug
I'm having an issue with useSSR, in a Next.js project that uses hooks

When one user asks for the page for the first time, with a querystring : ?lang=es
I call useSSR with initialLanguage of es and it is taken into account.

However if a subsequent request calls for ?lang=en
I call useSSR with en as initialLanguage but it serves spanish(es) language

It comes down to those variables

  var initializedLanguageOnce = false;
  var initializedStoreOnce = false;

that are created only once in the server so useSSR thinks it doesn't need to initialize the language

I use a custom file for useSSR locally without this caching mechanism and it works fine

Occurs in react-i18next version
9.0.2

Expected behaviour
I would expect that if I call useSSR with initialLanguage en it would translate in english instead of spanish.

Screenshots
Here you can see that we ask for ?lang=en but we are served content in spanish

Additional context
I use useSSR directly (not with withSSR) in a custom _app.js file.

With some minor tweeks specific to our use cases ( like getting lang in the server from awaiting a request in a custom _app.js, or taking it from the querystring ), it allows us to have a working version of react-i18next with hooks and next.js

[jamuhl]

The SSR/nextjs case is not yet done - will work with @isaachinman as soon this get closers to release -> https://github.com/isaachinman/next-i18next

[nassimbenkirane]

Thanks for the response (and huge props for this project btw).

Quoting @isaachinman (i18next/next-i18next#1 (comment))

If you're interested in using hooks ASAP, I'd suggest you take a look at our example in the react-i18next repo, and roll it yourself.

We were trying to get things working with the current implementation, while we wait for v10 and react official release of hooks.

Just thought it would be valuable input 😄

[jamuhl]

Guess you're using i18next-express-middleware if so we might set https://github.com/i18next/react-i18next/blob/master/src/hooks/useSSR.js#L3 on the https://github.com/i18next/react-i18next/blob/master/src/hooks/useSSR.js#L10 which hopefully is a cloned i18next instance sitting on req.i18n

[nassimbenkirane]

Yes, I tried it and it works well, this is the file I use for now:

const context = require('react-i18next/dist/commonjs/hooks/context')

export default function useSSR (initialI18nStore, initialLanguage) {
  var i18n = context.getI18n() // nextjs / SSR: getting data from next.js or other ssr stack

  if (initialI18nStore && !i18n.initializedStoreOnce) {
    i18n.services.resourceStore.data = initialI18nStore
    i18n.initializedStoreOnce = true
  }

  if (initialLanguage && !i18n.initializedLanguageOnce) {
    i18n.changeLanguage(initialLanguage)
    i18n.initializedLanguageOnce = true
  }
}

[jamuhl]

will try to update this on weekend...👍