javascript - ブラウザーがサーバーと同じ非同期呼び出しを行わないようにする

Question

私はこのチュートリアルに従っています: https://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/これは「標準」だと思います反応でサーバー側のレンダリングを行う方法（？）。

基本的に何が起こるかは、react ルーター (v4) を使用して、レンダリングしようとしているすべてのコンポーネントのツリーを作成することです。

const promises = branch.map(({ route }) => {
    return route.component.fetchInitialData
        ? route.component.fetchInitialData(store.dispatch)
        : Promise.resolve();
});

これらすべての promise が解決されるのを待ってから、 を呼び出しますrenderToString。

私のコンポーネントには、fetchInitialData次のような静的関数が呼び出されています。

class Users extends React.Component {
    static fetchInitialData(dispatch) {
        return dispatch(getUsers());
    }
    componentDidMount() {
        this.props.getUsers();
    }
    render() {
        ...
    }
}

export default connect((state) => {
    return { users: state.users };
}, (dispatch) => {
    return bindActionCreators({ getUsers }, dispatch);
})(Users);

getUsersそして、サーバーとクライアントの両方で呼び出されることを除いて、これはすべてうまく機能します。

getUsersもちろん、ロードされていてコールインしていないユーザーがいるかどうかを確認することもできますがcomponentDidMount、非同期コールを 2 回行わないようにするための、より適切で明示的な方法が必要です。