与next.js一起玩，但对客户端双重渲染感到困惑

Question

我需要执行运行时组件的加载和渲染，我尝试将必需的组件加载两次，一次在 getInitialProps 中，以便服务器渲染可以正常工作，并获得完美的dom结构。然后在 constructor 函数中再次加载这些组件，这样也可以使客户端呈现效果。

class Index extends React.Component {
static async getInitialProps() {
    //before we load the stratucte data from somewhere,
    //we don't know what components would be use in this page,
    //i just skip the components config data loading process, and only show the result this moment,
    //in this case, suppose we would use 2 test components in this page
    return {
    Bundle: dynamic({
        modules: () => ({
        Hello: import("../components/hello"),
        Hello2: import("../components/pageComponents/TestComp")
        }),
        render: (props, { Hello, Hello2 }) => (
        <div>
            <Hello />
            <Hello2 />
        </div>
        )
    })
    };
}
constructor(props) {
    super(props);
    const Bundle = dynamic({
    modules: () => ({
        Hello: import("../components/hello"),
        Hello2: import("../components/pageComponents/TestComp")
    }),
    render: (props, { Hello, Hello2 }) => (
        <div>
        <Hello />
        <Hello2 />
        </div>
    )
    });

    this.state = { Bundle };
}
state = {};

render() {
    let { Bundle } = this.props;// read from props, used in server-side
    if (!Bundle) Bundle = this.state["Bundle"]; //read from state, used in client-side
    if (!Bundle) return null; //othere wise,return null, in my thought, return null means keep the previous content, truth is not :(
    return (
    <div>
        <Bundle />
    </div>
    );
   }
}

运行水合物时，react-dom将直接调用渲染

但是，由于客户端中的组件尚未加载，因此此render调用将刷新ssr已经渲染的全部内容。同时，由于我已经将组件放置在构造函数中的内部状态，渲染内容已替换为客户端动态加载内容，但是这些组件仍在加载中，因此会显示一个明显的加载屏幕。

我的意思是

有没有办法保留SSR内容，或者只是阻止客户端初始化渲染调用？ 同时，构造函数不能是异步函数，我要等动态预加载完成然后再设置setState。我们可以在此之后定义，此页面已真正初始化，然后只需启动客户端进程

已更新

最后我从@timneutkens的this post那里得到了很好的解决方案

也就是说，只需首先将所有组件加载到页面中，然后选择您需要呈现的组件即可