Reactjs 反应SSR+；Redux+；需要从服务器获取数据的子组件

我有一个React应用程序CSR（客户端渲染）应用程序，我正在尝试将其转换为服务器端渲染。我有一个关于需要从服务器获取额外数据的组件的查询

我的CSR版本摘要

呈现的组件树：

Home
  |- multiple "ChildItemComponent"
                      |- multiple "GrandChildItemComponent"
                                           |- render elements, such as a img, text etc

• “Home”组件进行服务器调用以获取父ID列表，然后针对每个ParentId进行另一个服务器调用以获取子项并构建所有子项的数组。在“渲染”中，它映射整个子项，并为每个子项渲染“ChildItemComponent”

  componentDidMount() {
    ...
    let totalChildItems = [];
  
    fetchParentItems()
      .then((parentItems) => {
  
        parentItems.forEach((parent, index) => {
          fetchChildItems(parent.id)
            .then((childItems) => {
              totalChildItems = totalChildItems.concat(childItems);
            })
            ...
        });
      })
      ....
  }
  
  
   render(){
     ....
     {totalChildItems.map(
       (childItem) => <ChildItemComponent key={totalChildItems.id} item={childItem} />,
     )}
     ....
   }
  

  它不再返回一个组件，它返回一个包含函数和组件的对象，因此在另一个组件中我肯定做不到

   import ComponentA from './ComponentA.jsx';
   
   render(){
      <ComponentA />
   }
  

  从“/ComponentA.jsx”导入组件a；
  render（）{
  }
  

  因此，ComponentA无法从服务器获取数据
  我的查询/问题
  我的理解是否正确？我必须在“主页”中预先获取所有数据（存储在Redux中），然后其他组件只是从存储中接收数据/获取数据的功能组件
  如果是这种情况，我的服务器调用代码会变得非常复杂，因为我有几个服务器调用，每个服务器调用取决于另一个服务器调用的数据，在呈现组件之前需要调用这些数据。这真的很慢

  componentDidMount() {           
     getItemImage(grandChild.id)
     .then((url) => {
         // store URL on state
     })
  }
  
  render(){
    const { url } = this.state;
    ....
    <img ...... />
  }
  

  import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { getData } from '../redux/actions';
  
  class ComponentA extends React.Component {
    componentDidMount() {
      this.props.getData();
    }
  
    render() {
      ....
    }
  }
  
  function loadData(store) {
    return store.dispatch(getData());
  }
  
  function mapStateToProps(state) {
    return { data: state.homePageData };
  }
  
  export default {
    loadData,
    component: connect(mapStateToProps, { getData })(ComponentA ),
  };
  

   import ComponentA from './ComponentA.jsx';
   
   render(){
      <ComponentA />
   }