react-intl, async translation import and SSR

Question

I have a React app which uses react-intl to provide translations and it's working fine for browser DOM rendering. I have a component which deals with async locale/translation based on props it receives, using import() and then once locale + translation data are loaded, <IntlProvieder> is rendered. Like so:

// constructor

import(`react-intl/locale-data/${langCode}`).then((localeData) => {
  addLocaleData(localeData.
  this.setState({localeDataLoaded: true});
});

import(`../../translations/${locale}.json`).then((translations) => {
  this.setState({translations: translations.default});
});

render() {
  if (!this.state.translations || !this.state.localeDataLoaded) {
    return null;
  }

  return (
    <IntlProvider locale={this.props.locale} messages={this.state.translations} >
      {this.props.children}
    </IntlProvider>
  );
}

However, when it comes to SSR, the setState() calls don't trigger render() thus blocking the rest of the app from rendering.

I'd like to know what others are doing with regards to i18n and server/DOM rendering. Ideally I'm not going to be sending extraneous locale data to users over the web and I'd like a single component to manage all of this for both renderers.

Alternatively I may end up baking translations into the output file and generating JS files per locale

Currently your code has syntax errors and is incomplete. Could you update your question? — Webber, Jun 17 '19 at 21:04
Please treat it as pseudo code. I'm more interested in approach than exact code — cloakedninjas, Jun 18 '19 at 08:38

score 0 · Answer 1 · answered Sep 11 '19 at 03:22

0

For SSR you'd have to load things before rendering in the request lifecycle, then pass those down to react-intl

answered Sep 11 '19 at 03:22

Long Ho

599
4
15

react-intl, async translation import and SSR

1 Answers1