ReactJS - Как обрабатывать 7000 узлов в дереве категорий?

Question

у нас есть решение для электронной коммерции, которое транслирует контент SSR и затем обрабатывает его на клиенте. Мой главный вопрос заключается в том, насколько эффективно (с точки зрения производительности) мы можем отображать меню категорий на сервере (7 тыс. Записей на 4 уровнях) и обрабатывать их на клиенте. Я думаю, что лучшее решение - это пропустить увлажнение компонента меню.

Текущая реализация извлекает данные на сервер, сохраняет их в избыточном, выводит из избыточного, помещает в DOM в качестве исходных данных, формирует состояние на клиенте из исходных данных,Гидрат.

class Navigation extends Component {
  state = {
    isHidden: true
  };
  toggleMobileNav = e => {
    e.preventDefault();
    const { toggleNav } = this.props;
    toggleNav();
  };
  onMouseEnter = () => {
    this.setState({
      isHidden: false
    });
  };
  onMouseLeave = () => {
    this.setState({ isHidden: true });
  };
  shouldComponentUpdate(nextProps, nextState) {
    const { isHidden } = this.state;
    if (!_.isEqual(isHidden, nextState.isHidden)) return true;
    return false;
  }
  render() {
    const { isHidden } = this.state;
    const {
      t,
      className = '',
      menu = [],
      dataCategorical,
      webInstanceEmails,
      settings,
      pages
    } = this.props;
    const classNames = [];
    const activeItems = _.head(dataCategorical);
    if (className) {
      classNames.push(className);
    }
    const filtredPages = _.filter(pages, page =>
      _.includes([56, 25, 3], page.id)
    );
    return (
      <S.Wrapper
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
      >
        <S.CategoriesItem href="#" isActive={!isHidden}>
          {capfl(t('categories'))}
        </S.CategoriesItem>
        <S.Children isActive={!isHidden}>
          <nav>
            <S.List reset>
              {_.map(menu, item => {
                const { children } = item;
                if (_.isArray(children) && children.length) {
                  return (
                    <EnchancedItemDropdown
                      key={'nav-dropdown-item-' + item.id}
                      data={item}
                      activeItems={activeItems}
                    />
                  );
                }
                return (
                  <Item
                    href={item.externalUrl}
                    key={'nav-item-' + item.id}
                    route="category"
                    params={{ id: item.urlName }}
                    target={item.openInNewWindow ? '_blank' : ''}
                  >
                    {item.name}
                  </Item>
                );
              })}
            </S.List>
          </nav>
          {!_.isEmpty(filtredPages) ? (
            <S.StaticNav>
              <List reset>
                {_.map(filtredPages, page => {
                  return (
                    <Item
                      key={'nav-item-static-page-' + page.id}
                      route="static"
                      params={{ urlTitle: page.urlTitle }}
                    >
                      {page.title}
                    </Item>
                  );
                })}
              </List>
            </S.StaticNav>
          ) : (
            ''
          )}
          <S.Info>
            <S.InfoLink
              href={'mailto:' + _.get(webInstanceEmails, 'adminEmail', '')}
            >
              {_.get(webInstanceEmails, 'adminEmail', '')}
            </S.InfoLink>
            <S.InfoSep>|</S.InfoSep>
            <S.InfoLink href={'tel:' + _.get(settings, 'phone', '')}>
              {_.get(settings, 'phone', '')}
            </S.InfoLink>
          </S.Info>
        </S.Children>
      </S.Wrapper>
    );
  }
}

const makeMapStateToProps = () => {
  const getMenu = getMenuSelector();
  const getPageData = getPageDataSelector();
  const getWebInstanceEmails = getWebInstanceEmailsSelector();
  const getWebInstanceSettings = getWebInstanceSettingsSelector();
  const getWebInstancePages = getWebInstancePagesSelector();
  const mapStateToProps = (state, props) => {
    return {
      menu: getMenu(state, props),
      dataCategorical: _.get(
        getPageData(state, props),
        'breadcrumbs.categorical',
        null
      ),
      webInstanceEmails: getWebInstanceEmails(state, props),
      settings: getWebInstanceSettings(state, props),
      pages: getWebInstancePages(state, props)
    };
  };
  return mapStateToProps;
};

У меня есть сильное чувство, что существует огромный сбой в производительности, который можно устранить с помощью более эффективной обработки данных.