React SSR - 在异步操作后渲染组件

Question

React 的组件生命周期与 DOM 齐头并进，因此当我尝试在异步操作后在服务器端呈现时遇到问题。

我有一个组件（我们称它为包含组件）负责根据其 props 中传递的数据动态导入另一个组件（我们称它为内部组件）。

解决导入承诺后，我想在包含组件内渲染内部组件。

问题是，我无法访问包含组件的生命周期。

render() 仅在构建包含组件时触发一次。

由于永远不会调用 componentDidMount() 的相同原因，无法通过 forceUpdate() 和 setState() 更新组件。

使用服务器渲染时，如何在服务器端的异步操作后渲染组件？

到目前为止我的代码：

import React from 'react';

export default class ComponentLoader extends React.Component<{ component: string }, { component: any }> {

    constructor(props) {
        super(props);

        this.state = {
            component: null
        }; //no-op
    }

    componentDidMount(): void {
        //never called
    }

    componentWillMount(): void {
        import('./' + this.props.component).then(module => {
            this.forceUpdate(); //no-op
            this.setState({ component: React.createElement(module.default) }); //no-op
        });
    }

    render() {
        //called only once during construction
        return this.state.component || null; //this.state won't be available, nor will it matter if I access component any other way since render() won't be called again once that component is resolved anyway.
    }

}

Answer 1

我最终使用了可加载组件，与您在评论中看到的实现不同。

https://github.com/jamiebuilds/react-loadable

https://github.com/konradmi/react-loadable-ssr-code-splitting

在服务器端，它确保仅在所有依赖项异步加载后才呈现反应组件。这样渲染是同步的，因为这是目前唯一受支持的东西（尽管有支持异步反应 ssr 的功能请求），但加载是异步完成的，所以它不会阻止任何其他操作。

React SSR - 在异步操作后渲染组件

React SSR - Rendering a component following an async action

javascript

reactjs

server-side-rendering