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

【问题标题】：React SSR - Rendering a component following an async actionReact SSR - 在异步操作之后渲染组件
【发布时间】：2019-01-13 13:35:04
【问题描述】：

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.
    }

}

【问题讨论】：

请在您的问题中发布您迄今为止尝试过的相关代码。
给你，添加。
为了 SSR，您可能需要将代码重构为同步。使用require。
require 可以实现加载同步。我将如何解决其他异步案例，如 s2s 请求？例如，我将无法将 await 放入构造函数中。有类似的解决方案吗？抛开一切同步，在使用 SSR 时真的不可能异步执行吗？尝试扩展时，使所有内容同步可能是一个问题，即在此处查看警告，让我知道您的想法：npmjs.com/package/sync-request
看看loadable-components，这是React官方文档中推荐的在服务器上延迟加载React组件的方法：github.com/smooth-code/loadable-components/blob/master/packages/…

标签： javascript reactjs server-side-rendering

【解决方案1】：

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

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

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

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

【讨论】：