<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Page with a router (both useRouter, withRouter) calls the page component two times, one without router params and the second time with them. It doesn't work in static export</p>
<p dir="auto">A clear and concise description of what the bug is.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I've used your example for new routers, add static export config and got the same results as on my project.</p>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone https://github.com/ondrejsika/nextjs--router-bug-example
cd nextjs--router-bug-example/examples/dynamic-routing
yarn"><pre class="notranslate"><code class="notranslate">git clone https://github.com/ondrejsika/nextjs--router-bug-example
cd nextjs--router-bug-example/examples/dynamic-routing
yarn
</code></pre></div>
<h3 dir="auto">Dev Server</h3>
<p dir="auto">See two runs of page component in console.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1665772/67763512-28c37c00-fa48-11e9-8e9b-e2fb24954b65.png"><img width="1429" alt="Screen Shot 2019-10-29 at 12 17 21" src="https://user-images.githubusercontent.com/1665772/67763512-28c37c00-fa48-11e9-8e9b-e2fb24954b65.png" style="max-width: 100%;"></a></p>
<h3 dir="auto">Static Export</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn static"><pre class="notranslate"><code class="notranslate">yarn static
</code></pre></div>
<p dir="auto">see out/post/first/index.html there is no post.id rendered</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Run the component only one time and export propper static page.</p>
<h3 dir="auto">System information</h3>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser (if applies) chrome</li>
<li>Version of Next.js: 9.1.1</li>
</ul>
<p dir="auto">Because of the way Next.js does initial render of the pages, and that the initial render on client-side and server-side has to be the same (see <a href="https://reactjs.org/docs/react-dom.html#hydrate" rel="nofollow">https://reactjs.org/docs/react-dom.html#hydrate</a> ), sometimes when a page is rendered, its' <code class="notranslate">query</code> (returned i.e. by <code class="notranslate">useRouter()</code> hook) will be empty, even though it actually has query params. After the initial render, soon after there will be another render in which the <code class="notranslate">query</code> will be then populated with proper query params. ( Example described also in i.e. <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="466425942" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7880" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7880/hovercard" href="https://github.com/vercel/next.js/issues/7880">#7880</a> )</p>
<p dir="auto">My code relies on those query params very heavily and we need to know "are those the real current query params or not yet?". (i.e. because if query params are missing or incorrect, we'd like to redirect the user to another page)</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I think that either:</p>
<ul dir="auto">
<li><code class="notranslate">query</code> should be always populated with the current query params (even on initial client-side hydration that happens after a server-side render)</li>
<li>or, (IMO better), add a <code class="notranslate">ready: boolean</code> flag to <code class="notranslate">Router</code>, so the component can listen to this using i.e. <code class="notranslate">useEffect</code> and ignore the query params when they aren't parsed yet.</li>
</ul>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">I think we'll have to go with some <code class="notranslate">setTimeout</code> or sth for now until a better solution is found.</p>