Any dynamic route renders twice in browser

Bug report

Describe the bug

Any dynamic route is rendered twice in the browser. The entire <App /> seems to be rendered twice.

To Reproduce

1. Create route [pid].js in pages
2. Add code

const Page = () => {
  console.log('rendered')
  return <div />
}

export default Page

1. npm run dev
2. Open browser to localhost:3000/anypage
3. See ‘rendered’ printed twice

Expected behavior

Dynamic routes should only render once in the browser like any other page.

System information

macOS 10.15.4 Next.js 9.3.4 Chrome 80.0.3987.163 + Firefox 74.0

[rickchristie]

I just want to use query string and found out that the page is rendered twice whenever page is accessed with query string. Even if the page is not using useRouter, etc.

For static websites, we can use React.memo to prevent the second re-render, if the props hasn’t changed.

See: https://reactjs.org/docs/react-api.html#reactmemo

Hope this helps someone!

[ijjk]

Hi, this is the expected behavior for automatically statically optimized dynamic pages.

When a dynamic page does not leverage getServerSideProps, getStaticProps, or getInitialProps it is auto prerendered at build time and since the dynamic page’s values can’t be known during this stage the initial HTML doesn’t isn’t rendered with them so during the first render on the client we can’t provide these values either to make sure to match the initial HTML and not break hydration.

After hydration has occurred we parse the values from the URL on the client and trigger another render to allow the parsed values to be used now that hydration has occurred.