Async redux thunk in SERVER breaks

Examples bug report

Example name

with-redux-thunk

Describe the bug

Async thunk does not work in SSR

To Reproduce

The example repo: with-redux-thunk

In the above example, serverRenderClock is synchronous

export const serverRenderClock = isServer => dispatch => {
  return dispatch({ type: actionTypes.TICK, light: !isServer, ts: Date.now() })
}

everything work expected, on SSR, the example will render the time on the server

However, if we try to make serverRenderClock async, it breaks using below async serverRenderClock

export const serverRenderClock= usServer = dispatch => {
  return setInterval(() => {
    dispatch({ type: actionTypes.TICK, light: !isServer, ts: Date.now() })
  }, 1000)
}

The new getInitialProps

static async getInitialProps ({ reduxStore, req }) {
    const isServer = !!req
    await reduxStore.dispatch(serverRenderClock(isServer))
    return {}
  }

Expected behavior

With the new async dispatch, it should also render the server time as synchronous

Additional context

Above is an generalized example. However, let’s say if we want to dispatch an async thunk with API call in server, the scenario is similar For example, making async api call in thunk in the server side

getResultFromApi = () => async dispatch => {
   const response = await fetch('http://www.test-api.com')
   const data = await response.json()
   dispatch(setSuccessResponseAction(data)
}

How can I use above async thunk in my getInitialProps so SSR works properly?

[nataliyakarat]

@MarchWorks yes, you’re right. I’ve found that getInitialProps in index.js is not async https://github.com/zeit/next.js/blob/0dbd3b98eca0bee01a05b8414a60c48abba76abd/examples/with-redux-thunk/pages/index.js#L7

it has to be this way:

static async getInitialProps({ reduxStore, req }) {
    const isServer = !!req;
    await reduxStore.dispatch(serverRenderClock(isServer));

    return {};
  }

[nblthree]

@meuwka check it here https://codesandbox.io/s/helloworld-37ycq click on Open in new window (not necessary just to see the delay more clearly.) it will take 10 seconds before the page render