Giters

manuelbieh / react-ssr-setup

React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to pass a language variable from ssr server to client?

v1ar31 opened this issue · comments

commented

When we use the URL with the locale parameter, the locale is expected to be transmitted to the client. For example,
http://localhost/en/my-page -> en is the locale parameter
We want to transfer the locale parameter to the client.

i18next.init({
fallbackLng: 'en', <<- we want to change this
fallbackNS: ['translation'],
resources: { ... },
});

i18next-express-middleware does not work because in the react-ssr-setup we use react-router instead of express-router

commented

You don't have to transfer the language parameter to the client, you already have it in the client if you have it in the URL!

If the language prefix is always present in the URL you could do something like

const locale = location.pathname.split('/')[1];
commented

You don't have to transfer the language parameter to the client, you already have it in the client if you have it in the URL!

If the language prefix is always present in the URL you could do something like

const locale = location.pathname.split('/')[1];

This solution will not work for SEO.

commented

If you need the locale in the rendered markup, you could change this part of the server renderer to something like:

<Html [...]>
  {content}
  <script>
    window.__detectedLanguage__ = '{detectedLanguage}';
  </script>
</Html>

and work with window.__detectedLanguage__ in the client. Depends on your implementation how this should be done. I'm afraid I can't help you here without knowing your implementation of the server side part.