response-intl, импорт асинхронных переводов и SSR - PullRequest
Новая
       22

response-intl, импорт асинхронных переводов и SSR

0 голосов
/ 17 июня 2019

У меня есть приложение 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 и server / DOM. В идеале я не собираюсь отправлять посторонние языковые данные пользователям через Интернет, и я хотел бы, чтобы один компонент управлял всем этим для обоих средств визуализации.

В качестве альтернативы я могу в конечном итоге запечь переводы в выходной файл и генерировать файлы JS для каждой локали

...