javascript - アクションクリエーターが完全に完了するまでNext.jsサーバーを待機させる方法は?

Question

私はReduxでNext.jsを使用しています。アクション クリエーターが完全に完了するまで (外部サーバーへの要求を含む) 待つ必要があるため、データは既に初期レンダリングに含まれています。この場合を例に説明しようと思います。

ドキュメントの例からHOCを使用してラップpageしています。

したがって、以下にコード例を示します。

pagesフォルダー内のindex.js 。

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

export default withRedux()(IndexPage)

RunningLineContainer.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'

import RunningLine from '../../components/RunningLine'
import { fetchLatestNews } from '../../actions/wp_news'

class RunningLineContainer extends Component {

    componentDidMount() {
        if (!this.props.lastestNews) {
            this.props.fetchLatestNews('&count=6')
        }
    }

    render() {
        const { latestNews, isLoading } = this.props
        return <RunningLine data={latestNews} isLoading={isLoading} />
    }
}

const mapStateToProps = ({ newsState }) => {
    const { latestNews, isLoading } = newsState
    return {
        latestNews,
        isLoading
    }
}

export default connect(mapStateToProps, { fetchLatestNews })(RunningLineContainer)

現在、リクエストはクライアント側で行われているため、リクエストからのデータはサーバーによってレンダリングされず、データ コンテンツは検索エンジンによって表示されません。私の目的は、このデータが初期ロード時に応答されるようにすることです (サーバーによってレンダリングされます)。

以下のアクションクリエーターコード:

export function fetchLatestNews(params) {
    return function (dispatch) {
        dispatch({ type: newsTypes.FETCH_WP_LATEST_NEWS_REQUEST })
        newsApi.fetchLatestNews(params)
            .then(response => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_SUCCESS,
                    payload: response.data,
                })
            })
            .catch(error => {
                dispatch({
                    type: newsTypes.FETCH_WP_LATEST_NEWS_FAILURE,
                    payload: error,
                })
            })
    }
}

getInitialProps次のようにindex.js で静的メソッドを使用しようとしましたpage:

import withRedux from '../utils/withRedux'
import RunningLineContainer from '../src/containers/news/RunningLineContainer'

const IndexPage = () => <RunningLineContainer />

IndexPage.getInitialProps = async ({ store }) => {
    await store.dispatch(fetchLatestNews())
}

export default withRedux()(IndexPage)

残念ながら、私にはうまくいきません。

このタスクを解決するにはどうすればよいですか? 回避策はありますか？

前もって感謝します！