<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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">If a user clicks a Link in your app and navigates to a page with getInitialProps which takes some time to fetch data, your app may seem broken or hung. Even if you show some kind of preloader to tell them something is loading, if they take a look at the address bar, they will see the old url until getInitialProps finishes it's job and the new url is pushed to the browser history. Shouldn't the url change come first?</p>
<p dir="auto">I'm curious what do you guys think about it and what was the motivation behind implementing it this way.</p>
<p dir="auto">When using <code class="notranslate">Router.push</code> to route to the same page but with a different query string value the page is not remounted. Instead, both <code class="notranslate">getInitialProps</code> and <code class="notranslate">componentWillReceiveProps</code> are executed. Is this the intended behavior?</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">I would expect the current page component to unmount (<code class="notranslate">componentWillUnmount</code> should fire) and the new page to mount (<code class="notranslate">componentDidMount</code> should fire). If people want to shallow route they can use the Router <code class="notranslate">shallow:true</code> option.</p>
<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component } from 'react';
import Router from 'next/router';

class PageTest extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.goToPage = this.goToPage.bind(this);
  }

  static async getInitialProps({ query }){
    console.log('getInitialProps');
    return {
      pageId: query.pageId 
    }
  }

  componentWillReceiveProps(nextProps){
    console.log('componentWillReceiveProps', nextProps);
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  goToPage(e){
    e.preventDefault();

    const { pageId } = this.props;
    const nextPageId = pageId === 'a' ? 'b' : 'a';

    Router.push(
      `/page-test?pageId=${nextPageId}`,
      `/page-test/${nextPageId}`,
      //{ shallow: false } // Doesn't do anything
    );
  }

  render() {
    return (
      &lt;div&gt;
        &lt;a href=&quot;#&quot; onClick={this.goToPage}&gt;Go to other page&lt;/a&gt;
      &lt;/div&gt;
    );
  }
}

export default PageTest;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Router</span> <span class="pl-k">from</span> <span class="pl-s">'next/router'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">PageTest</span> <span class="pl-k">extends</span> <span class="pl-v">Component</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">goToPage</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">goToPage</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</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> query <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">{</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-s">'getInitialProps'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">pageId</span>: <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">pageId</span> 
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">)</span><span class="pl-kos">{</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-s">'componentWillReceiveProps'</span><span class="pl-kos">,</span> <span class="pl-s1">nextProps</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">componentDidMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</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-s">'componentDidMount'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">componentWillUnmount</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</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-s">'componentWillUnmount'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">goToPage</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-kos">{</span> pageId <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">nextPageId</span> <span class="pl-c1">=</span> <span class="pl-s1">pageId</span> <span class="pl-c1">===</span> <span class="pl-s">'a'</span> ? <span class="pl-s">'b'</span> : <span class="pl-s">'a'</span><span class="pl-kos">;</span>

    <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
      <span class="pl-s">`/page-test?pageId=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">nextPageId</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-s">`/page-test/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">nextPageId</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-c">//{ shallow: false } // Doesn't do anything</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"#"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">goToPage</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Go to other page<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">PageTest</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>


<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>3.0.6</td>
</tr>
<tr>
<td>node</td>
<td>8.1.4</td>
</tr>
<tr>
<td>OS</td>
<td>OSX</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>