Должен ли я использовать реагирующую или загружаемые компоненты для разделения кода?

Question

Я хочу разделить мой код реакции с рендерингом на стороне сервера. Для этого у меня есть два варианта.

• загружаемые-компоненты
• реагируют загружаемый

загружаемые-компоненты

Реактивная документация предложила использовать loadable-компоненты для серверных приложений. Но у него очень мало еженедельных загрузок NPM.

реагируют загружаемый

Еженедельные загрузки этого пакета NPM очень высоки по сравнению с предыдущим, но, согласно документации на загружаемые компоненты, этот пакет больше не поддерживается.

response-loadable был рекомендуемым способом разделения кода React в течение длительного времени. Однако сегодня он больше не поддерживается и не совместим с Webpack v4+ и Babel v7+. Документация Ссылка

Пожалуйста, соберите меня с соответствующей посылкой.

Answer 1

Несмотря на то, что документация о реагирующей загрузке говорит, что реагирующая загрузка не совместима с Webpack v4+ и Babel v7+, я использовал реактивную загрузку, и это сработало. Я не сталкивался с какой-либо проблемой как на сервере, так и на стороне клиента.

Answer 2

FWIW loadable-componentsрекомендуется командой React

Также, React.lazy в настоящее время не поддерживает SSR (по состоянию на май 2020 г.)

Answer 3

Вы можете использовать React.lazy. Это автоматически загрузит пакет, содержащий OtherComponent, когда этот компонент будет визуализирован.

React.lazy принимает функцию, которая должна вызывать динамический импорт (). Это должно вернуть Promise, который разрешается в модуль с экспортом по умолчанию, содержащим компонент React.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}