<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">My use case is that we have a 1MB json file that is needed to render the page. No problem on the server, but we don't want to send this data to client from getInitialProps as it'll make the pagesize huge.</p>
<p dir="auto">So, we want to SSR initially, then load the JSON file via ajax on the client and only then trigger the initial client-side hydration/render once the file has loaded.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">A way to supply a promise to next/client that can awaited before the client-side hydration takes place.</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">If we cannot wait to delay the render, the initial SSR completes, then we have to replace it with a loading spinner on the client side while the file finishes loading. That's obviously not ideal, as it means that:</p>
<ul dir="auto">
<li>The content renders server-side.</li>
<li>Then it disappears on the client initial render, replaced by a spinner.</li>
<li>And then returns as before, on a client later render after the file has loaded.</li>
</ul>
<p dir="auto">You can imagine how that gives a pretty confusing experience for the user.</p>
<p dir="auto">I've got it working by either:</p>
<ul dir="auto">
<li>Directly adding another await call inside the next/client/index render method in node_modules</li>
<li>Using a hacky innerHTML workaround (see comment below),</li>
</ul>
<p dir="auto">Both these ways have problems, and so I'd prefer a real solution.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I'm happy to do a PR if you can suggest me on the right approach to take.</p>
<p dir="auto">I just wanted to see if there was a reason why the nextjs scripts like page/ and app.js load in as High priority assets. It seems to me that as high priority, they block DOMContentLoaded, and we could get quicker page rendering if we made them low priority assets.</p>
<p dir="auto">It also seems like there was <a href="https://github.com/zeit/next.js/issues/1436" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/1436/hovercard">some intention to have them as low priority assets in #1436</a>: the scripts all have <code class="notranslate">async=""</code> on them in production, which should make them low priority, but the presence of <a href="https://github.com/zeit/next.js/blob/master/server/document.js#L43">these preload links</a> makes them high priority. For instance this is <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-news">next-news</a>.now.sh:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/300439/28184328-d82883c2-67c7-11e7-817b-f9d2f04be364.png"><img src="https://user-images.githubusercontent.com/300439/28184328-d82883c2-67c7-11e7-817b-f9d2f04be364.png" alt="screen shot 2017-07-13 at 12 34 45 pm" style="max-width: 100%;"></a></p>
<p dir="auto">More on priorities in chrome: <a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf" rel="nofollow">https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf</a></p>
<hr>
<p dir="auto">I did an experiment with throttling on my project, with throttling to simulate a 3G connection (Regular 3G preset in Chrome).</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="      var rendered = await nextApp.renderToHTML(req, res, '/', '');
      rendered = rendered.replace(/&lt;link rel=&quot;preload&quot; href=&quot;\/_next\/[a-zA-Z0-9\-]+\/.+?&quot; as=&quot;script&quot;\/&gt;/g, '');
      res.send(rendered);"><pre class="notranslate"><code class="notranslate">      var rendered = await nextApp.renderToHTML(req, res, '/', '');
      rendered = rendered.replace(/&lt;link rel="preload" href="\/_next\/[a-zA-Z0-9\-]+\/.+?" as="script"\/&gt;/g, '');
      res.send(rendered);
</code></pre></div>
<ul dir="auto">
<li>Standard next.js (high priority): DOMContentLoaded in 10.26 seconds</li>
<li>Removing rel=preload links (this makes them medium priority): DOMContentLoaded in 7.87 seconds</li>
</ul>
<p dir="auto">This seems to make a big difference for mobile users.</p>


<ul dir="auto">
<li>[x ] 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>