<p dir="auto">Can someone help me, how to refresh the page and <em>call</em> getInitialProps <em>again</em> when i click on back button of the browser? i got no answer on StackOverflow and Gitter so..</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">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>latest</td>
</tr>
<tr>
<td>node</td>
<td>9.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>Mac</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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">I'll start by saying this might be a misunderstanding of mine, but I have gone over this a few times and believe there is an issue here. My apologies if I am mistaken!</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">In the <code class="notranslate">with-mobx</code> example: <a href="https://github.com/zeit/next.js/tree/master/examples/with-mobx">https://github.com/zeit/next.js/tree/master/examples/with-mobx</a><br>
The store is implemented both on the server side and on the client side.<br>
As explained in the README, on the server-side a new instance is created for each page request so as not to mix between users/requests, etc. On the client side, it is a singleton so that different components/pages will have the same state and to allow us to keep a global state.<br>
The way the example implements it, state created by the server will be propagated to the client but <em>not to the client's store</em>.</p>
<p dir="auto">Since <code class="notranslate">getInitialProps</code> on first load is run on the server: <a href="https://github.com/zeit/next.js/blob/master/examples/with-mobx/pages/index.js#L7-L11">https://github.com/zeit/next.js/blob/master/examples/with-mobx/pages/index.js#L7-L11</a><br>
Then the <code class="notranslate">isServer</code> property will be true on first load on the client as well: <a href="https://github.com/zeit/next.js/blob/master/examples/with-mobx/pages/index.js#L15">https://github.com/zeit/next.js/blob/master/examples/with-mobx/pages/index.js#L15</a></p>
<p dir="auto">This would mean that the store created on the client will not be a singleton, and when we navigate to other pages with <code class="notranslate">Link</code>, a new store will be created without the state data propagated from the server.</p>
<p dir="auto">My desired (expected) behaviour would be to have some way to distinguish between client and server when creating the store even on initial page load (this is critical, to my understanding, for keeping global state between pages). I'm currently achieving this with something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="getInitialProps ({req}) {
  // ...
  // here returning isServer as !!req would not be good
  // this is not run on the client on initial load, 
  // so in that case props.isServer would be true on the client as well
  return { myData }
}
constructor (props) {
  const isServer = typeof window === undefined
  initStore(isServer, props.myData)
}"><pre class="notranslate"><span class="pl-en">getInitialProps</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>req<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-c">// ...</span>
  <span class="pl-c">// here returning isServer as !!req would not be good</span>
  <span class="pl-c">// this is not run on the client on initial load, </span>
  <span class="pl-c">// so in that case props.isServer would be true on the client as well</span>
  <span class="pl-k">return</span> <span class="pl-kos">{</span> myData <span class="pl-kos">}</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-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">isServer</span> <span class="pl-c1">=</span> <span class="pl-k">typeof</span> <span class="pl-smi">window</span> <span class="pl-c1">===</span> <span class="pl-c1">undefined</span>
  <span class="pl-en">initStore</span><span class="pl-kos">(</span><span class="pl-s1">isServer</span><span class="pl-kos">,</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">myData</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The example uses <code class="notranslate">const isServer = !!req</code> inside <code class="notranslate">getInitialProps</code> - this results in the initial server begotten state not being stored in the client store.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">If I want to store global state, I am only able to do that starting from the second page I navigate to using the with-mobx example. In my workaround I use (as mentioned above) <code class="notranslate">const isServer = typeof window === undefined</code> which I think is a somewhat non-native to next.js solution... if you have a better suggestion I would love to hear it!<br>
I'm mostly opening this issue because I think I won't be the only one affected and confused by it.</p>