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).