react-intl，异步转换导入和SSR

Question

我有一个React应用程序，它使用react-intl来提供翻译，并且它适用于浏览器DOM渲染。 我有一个组件，它使用import()处理基于它接收的道具的异步语言环境/翻译，然后一旦加载语言环境+翻译数据，就会呈现<IntlProvieder> 。 像这样：

// 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>
  );
}

但是，当涉及SSR时， setState()调用不会触发render()从而阻止应用程序的其余部分呈现。

我想知道其他人在i18n和服务器/ DOM渲染方面做了些什么。 理想情况下，我不会通过网络向用户发送无关的区域设置数据，我希望单个组件可以为两个渲染器管理所有这些。

或者，我可能最终将翻译烘焙到输出文件中，并在每个语言环境中生成JS文件

Answer 1

对于SSR，您必须在请求生命周期中进行渲染之前加载内容，然后将这些内容传递给react-intl