<p dir="auto">As far as I can tell, the static <code class="notranslate">getInitialProps</code> doesn't provide a uniform way to access url params on the client and server. On the server, you can access <code class="notranslate">req</code> and parse the url yourself. On the client, we don't seem to have access to the route information within the <code class="notranslate">getInitialProps</code> function. The uses for this are fairly obvious, i think, such as loading a particular user profile based on an <code class="notranslate">:id</code> param, and so on. I'm also wondering if auth could somehow be implemented here too -- thought I'm less clear if that's the best API.</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>
<p dir="auto">This <code class="notranslate">pages/_document.js</code> does change color only after 2 triggered HMRs:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Document, {Head, Main, NextScript} from 'next/document';

export default class MyDocument extends Document {
  static getInitialProps(ctx) {
    return super.getInitialProps(ctx);
  }

  render() {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;style jsx global&gt;{`
            body {
              color: green;
            }
          `}&lt;/style&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">Head</span><span class="pl-kos">,</span> <span class="pl-v">Main</span><span class="pl-kos">,</span> <span class="pl-v">NextScript</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">MyDocument</span> <span class="pl-k">extends</span> <span class="pl-v">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-s1">ctx</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-s1">ctx</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">html</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span> <span class="pl-c1">global</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">            body {</span>
<span class="pl-s">              color: green;</span>
<span class="pl-s">            }</span>
<span class="pl-s">          `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">NextScript</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</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-kos">;</span></pre></div>
<p dir="auto">This is in a fresh project (<code class="notranslate">yarn add next@^3.0.1-beta react react-dom</code>, hello world <code class="notranslate">pages/index.js</code>  and the above in <code class="notranslate">pages/_document.js</code>), running server with <code class="notranslate">yarn next</code>.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When I edit <code class="notranslate">color: green</code> to another color (e.g. red) and save, page updates to show the new color.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When I edit <code class="notranslate">color: green</code> to another color (e.g. red) and save, <em>page stays green</em>. Then I edit the color again (e.g. black) and save, <em>page becomes red</em>.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Trying to get a new project with some global styling going.</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>2.4.7 and 3.0.1-beta.13 (using styled-jsx 1.0.8)</td>
</tr>
<tr>
<td>node</td>
<td>8.1.3</td>
</tr>
<tr>
<td>OS</td>
<td>OS X 10.9.5</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 59</td>
</tr>
<tr>
<td>editor</td>
<td>Sublime Text 3 (build 3141)</td>
</tr>
</tbody>
</table>