GetInitialProps get called twice when using Dynamic route causing Query params to be undefined

Bug report

When trying to access a page like: posts/[id] which is a page that uses a dynamic query param:

const Posts = ({ value }) => <h1>{value}</h1>

Posts.getInitialProps = async function (appContext) {
console.log('Calling Test getinitialProps with query', appContext.query.id)
const value = await fetch(`/api/posts/${id}`)
  return {
    value,
    namespacesRequired: ['common']
  }
}
export default Posts

I get the console log inside the getInitialProps called twice with the second time the query param is undefined which causes errors (especially for the API call which fails since the ID is undefined the second time)

I don’t know why this happens

To Reproduce

I have a custom _app.js which looks like this:

class MyApp extends App {
  static async getInitialProps (appContext) {
    const { Component, ctx } = appContext
    let pageProps = {}
    if (Component.getInitialProps) {
      console.log('calling getInitialProps')
      pageProps = await Component.getInitialProps(ctx)
    }
    pageProps.configs = get(ctx, 'req.EnvConfigs', {})
    return { pageProps }
  }
...

System information

• OS: macOS
• Browser Chrome
• Version of Next.js: 9.4.2

[Sletheren]

Surprisingly, after spending hours trying to debug this! Found out that the page rerender twice, because of an Image component that had a src that gets retrieved from the redux store and on refresh/mount, the store is not initialized, and the image ends up loading undefined as the src url, which causes the page to trigger twice (Weird behaviour)

[hiro1107]

I had the same issue and as Sletheren said, this happens when the app tried to get an image, but it only happened when the image URL was undefined.