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渲染方面做了什么。理想情况下，我不会通过web向用户发送无关的区域设置数据，我希望使用单个组件为两个渲染器管理所有这些数据。

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

Answer 1

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