title: How to make Next.js server waiting until action creator is fully done?
body: <p>I'm using <strong>Next.js</strong> with <strong>Redux</strong> and I need to wait until action creator is fully done (including request to the external server) so data will be already in the initial rendering. I will try to explain this case in example.</p>
  
  <p>I'm using HOC from <a href="https://github.com/zeit/next.js/blob/master/examples/with-redux/utils/withRedux.js" rel="nofollow noreferrer">example</a> in docs and wrap <code>page</code> with it.</p>
  
  <p>So, below you can see code example:</p>
  
  <p><strong>index.js</strong> in <code>pages</code> folder.</p>
  
  <pre><code>import withRedux from '../utils/withRedux'
  import RunningLineContainer from '../src/containers/news/RunningLineContainer'
  
  const IndexPage = () =&gt; &lt;RunningLineContainer /&gt;
  
  export default withRedux()(IndexPage)
  </code></pre>
  
  <p><strong>RunningLineContainer.jsx</strong></p>
  
  <pre><code>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('&amp;count=6')
          }
      }
  
      render() {
          const { latestNews, isLoading } = this.props
          return &lt;RunningLine data={latestNews} isLoading={isLoading} /&gt;
      }
  }
  
  const mapStateToProps = ({ newsState }) =&gt; {
      const { latestNews, isLoading } = newsState
      return {
          latestNews,
          isLoading
      }
  }
  
  export default connect(mapStateToProps, { fetchLatestNews })(RunningLineContainer)
  </code></pre>
  
  <p>Currently, request is being made on the client side thus data from request is not rendered by the server and data content not being seen by search engines. My aim to make this data being responded on initial loading (rendered by the server). </p>
  
  <p>Action creator code below:</p>
  
  <pre><code>export function fetchLatestNews(params) {
      return function (dispatch) {
          dispatch({ type: newsTypes.FETCH_WP_LATEST_NEWS_REQUEST })
          newsApi.fetchLatestNews(params)
              .then(response =&gt; {
                  dispatch({
                      type: newsTypes.FETCH_WP_LATEST_NEWS_SUCCESS,
                      payload: response.data,
                  })
              })
              .catch(error =&gt; {
                  dispatch({
                      type: newsTypes.FETCH_WP_LATEST_NEWS_FAILURE,
                      payload: error,
                  })
              })
      }
  }
  </code></pre>
  
  <p>I've tried to use static method <code>getInitialProps</code> in <strong>index.js</strong> <code>page</code> like this:</p>
  
  <pre><code>import withRedux from '../utils/withRedux'
  import RunningLineContainer from '../src/containers/news/RunningLineContainer'
  
  const IndexPage = () =&gt; &lt;RunningLineContainer /&gt;
  
  IndexPage.getInitialProps = async ({ store }) =&gt; {
      await store.dispatch(fetchLatestNews())
  }
  
  export default withRedux()(IndexPage)
  </code></pre>
  
  <p>Unfortunately, it doesn't work for me.</p>
  
  <p>How can I solve this task? Is there any workaround?</p>
  
  <p><strong>Thanks in advance!</strong></p>