<p dir="auto"><code class="notranslate">console.log(router)</code> shows correct asPath but If I access <code class="notranslate">console.log(router.asPath)</code> shows the previous URL</p>



<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Code (<code class="notranslate">_app.js</code>)</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default class MyApp extends App {
  constructor(props) {
    super(props)
  }

  static async getInitialProps({ Component, router, ctx }) {
    // Router.asPath shows current URL, can be seen from browser console as below
    console.log(router)
    // But if i access the asPath property as below, it shows previous URL. On server side, it's fine
    console.log(router.asPath)
  }
  ...
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">MyApp</span> <span class="pl-k">extends</span> <span class="pl-v">App</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">static</span> <span class="pl-k">async</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> Component<span class="pl-kos">,</span> router<span class="pl-kos">,</span> ctx <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Router.asPath shows current URL, can be seen from browser console as below</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">router</span><span class="pl-kos">)</span>
    <span class="pl-c">// But if i access the asPath property as below, it shows previous URL. On server side, it's fine</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">asPath</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
  ...
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Refer to above code, <code class="notranslate">router.asPath</code> should return current URL on client side</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Refer to above code, <code class="notranslate">router.asPath</code> returns previous URL on client side</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">Please refer to above code example.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">After url is <a href="https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md">deprecated</a>, we pass URL from <code class="notranslate">_app.js</code>, as all pages need this for some sort of SEO related stuffs.</p>
<p dir="auto">as a workaround using <code class="notranslate">ctx.asPath</code> for now</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>9.x</td>
</tr>
<tr>
<td>OS</td>
<td>mac</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Feature request</h1>
<p dir="auto">Client-side navigation without <code class="notranslate">getInitialProps</code> being called</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/31973492/63555645-9908cb00-c4f6-11e9-8869-d2ea47ab3939.png"><img width="1036" alt="Screen Shot 2019-08-22 at 3 32 11 PM" src="https://user-images.githubusercontent.com/31973492/63555645-9908cb00-c4f6-11e9-8869-d2ea47ab3939.png" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>
<p dir="auto">Headless CMS data is requested on every client-side route, slowing down the site.</p>
</li>
<li>
<p dir="auto">API keys are visible</p>
</li>
</ul>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I'd like to be able to navigate through a site client-side (for page transitions) without having data requests in <code class="notranslate">getInitialProps</code></p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<ul dir="auto">
<li>Gatsby</li>
<li>if statements inside <code class="notranslate">getInitialProps()</code> that only runs requests on the server. Results in an error, <code class="notranslate">An unexpected error has occurred.</code></li>
</ul>