react-intl，异步翻译导入和 SSR

Question

我有一个使用 react-intl 提供翻译的 React 应用程序，它在浏览器 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