Question

我需要您建议如何通过API和服务器端渲染来实现加载项目。我的ssr正在与Express Express和Babel合作。我有这个组件：

class MyApp extends Component {
    constructor(props) {
        super(props)
        this.state = {result: []}
    }

    componentDidMount() {
        //request to api and set result in state
    }
    render() {
        return (<div>{this.state.result}</div>)
    }
}

渲染时，我总是得到一个空的组件。仅在从Api获取数据后如何渲染它。我的渲染示例：https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf谢谢

Answer 1

任何一个react组件生命周期挂钩都不会阻止渲染，您需要确保渲染之前完成数据获取以获取SSR。根据您的数据管理，有些库可以提供帮助。

redux-connect是其中之一，可让您在asyncConnect装饰器中定义禁止承诺。

react-data-fetching-components不是特定于Redux的，它允许您在withInitialData中定义禁止承诺

react-ssr与fetchData静态方法类似。

Next.js也是一种流行的框架，它以最少的配置即开即用地进行SSR。

现在也许可以使用React的内置API来做到这一点，但是我不确定。通常，您需要在服务器上添加自己的阻止数据获取抽象。

提取请求时出现空结果，并带有ssr rendring

1 个答案: