Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useSSR doesn't change language server side #823

Closed
Swiip opened this issue Apr 11, 2019 · 6 comments
Closed

useSSR doesn't change language server side #823

Swiip opened this issue Apr 11, 2019 · 6 comments

Comments

@Swiip
Copy link
Contributor

Swiip commented Apr 11, 2019

Describe the bug
Using useSSR with Next. I cache user language selection with a cookie. The server always use the same language server side which leads to hydration problems.

Linked to #671 and probably #817

Looking at the code of useSSR, it seems that the use of i18n.initializedLanguageOnce prevent to change language. It's ok client side but server side, the same server with the same instance of i18next will be reused to handle requests asking with different languages.

Occurs in react-i18next version
10.1.1

To Reproduce

  1. Project with Next.js
  2. Use of react-i18next and useSSR
  3. Use cookie strategy to store user prefered language
  4. Render any page in a first language
  5. Change language
  6. Refresh

Expected behaviour
useSSR server side should be able to respond with the detected language, not keeping the first language used

OS (please complete the following information):

  • Device: MacBook Pro 15'
  • Browser: Chrome 73

Additional context
I have a workaround waiting for a more elegant solution.

if (!process.browser) {
  i18next.initializedLanguageOnce = false;
}
@jamuhl
Copy link
Member

jamuhl commented Apr 12, 2019

Do you use the same instance of i18next on serverside render do you not use the i18n instance that you get from req.i18n using the express middleware?

@Swiip
Copy link
Contributor Author

Swiip commented Apr 12, 2019

I use my own instance indeed. I didn't thought the middleware will give me a new one each time. To have the full context, here is the gist of my Next / i18next HoC.

https://gist.github.com/Swiip/457f50cb4c4da0698f39cc06db2cad9e

@jamuhl
Copy link
Member

jamuhl commented Apr 12, 2019

using that is crucial -> as think of two requests doing async operations before doing send the response both use your one singleton i18next instance and change the language on it...you will get wrong responses.

for react-i18next + next.js i highly recommend: https://github.com/isaachinman/next-i18next

@Swiip
Copy link
Contributor Author

Swiip commented Apr 17, 2019

Thanks for the hint. I don't want to use the full next-i18next which is too much for me but understanding the question of using different instances of i18next on the server side let me fix my problems. It's fully working now.

If I may ask yet something else, using specific instances of i18next creates the need of accessing the instance in the context. react-i18next doesn't publish its context and I was not able to get back to it to programmatically ask for changing language. I doubled with my own context but it's a shame, if you can just export the context linked to the provider, it would be enough.

@Swiip Swiip closed this as completed Apr 17, 2019
@jamuhl
Copy link
Member

jamuhl commented Apr 17, 2019

@Swiip
Copy link
Contributor Author

Swiip commented Apr 17, 2019

Yep, exactly, I will send the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants