SSR support

To use Tolgee with your SSR framework such as Next or Gatsby, you can provide localization data imported as object using staticData property of TolgeeProvider component, this data will be loaded directly into cache and immediately available with first render for SSR. We also need to know user's locale already on the server and force Tolgee to use it through forceLanguage.

import localeEn from 'i18n/en.json';
import localeDe from 'i18n/de.json';

...

const App = () {
  // this needs to work on server
  const locale = ?

  return (
    <TolgeeProvider
      forceLanguage={currentLocale}
      staticData={{
        en: localeEn,
        de: localeDe,
      }}
      ...
    >
      ...
    </TolgeePrivider>
  )
}

With this approach we include all translations directly in the bundle regardless user locale. For smaller projects this is not a big issue, however it might be significant for large applications with many translations and languages.

For these cases we need to only provide statically the locale, that the user is currently using. We can also use async functions in staticData which will be used for fetching translations dynamically on client side (you can use this instead of having them in public folder).

const App = () {
  // we need to get these on server, which we'll need to implement
  // differently for each framework
  const locale = ?
  const localeTranslations = ?

  return (
    <TolgeeProvider
      forceLanguage={currentLocale}
      staticData={{
        en: () => import('i18n/en.json'),
        de: () => import('i18n/de.json'),
        [locale]: localeTranslations
      }}
      ...
    >
      ...
    </TolgeePrivider>
  )
}

Language changing

When we use SSR, we have to specify language in a way that is detectable by both client and server. Easiest way is to include it directly in URL - both next.js and Gatsby have support for this.

Then for language change we use the native way of the framework (Tolgee than changes the language when it detects forceLanguage prop change).