<p dir="auto">React v16.3 context provided in <code class="notranslate">pages/_app.js</code> can be consumed and rendered in pages on the client, but is undefined in SSR. This causes React SSR markup mismatch errors.</p>
<p dir="auto">Note that context can be universally provided/consumed <em>within</em> <code class="notranslate">pages/_app.js</code>, the issue is specifically when providing context in <code class="notranslate">pages/_app.js</code> and consuming it in a page such as <code class="notranslate">pages/index.js</code>.</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">Expected Behavior</h2>
<p dir="auto">Context provided in <code class="notranslate">pages/_app.js</code> should be consumable in pages both on the server for SSR and when browser rendering.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Context provided in <code class="notranslate">pages/_app.js</code> is undefined when consumed in pages for SSR. It can only be consumed for client rendering.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">In <code class="notranslate">pages/_app.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import App, { Container } from 'next/app'
import React from 'react'
import TestContext from '../context'

export default class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      &lt;Container&gt;
        &lt;TestContext.Provider value=&quot;Test value.&quot;&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/TestContext.Provider&gt;
      &lt;/Container&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">App</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Container</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/app'</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">TestContext</span> <span class="pl-k">from</span> <span class="pl-s">'../context'</span>

<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">render</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> Component<span class="pl-kos">,</span> pageProps <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-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Container</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">TestContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"Test value."</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Component</span> <span class="pl-kos">{</span>...<span class="pl-s1">pageProps</span><span class="pl-kos">}</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-v">TestContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Container</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">In <code class="notranslate">pages/index.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import TestContext from '../context'

export default () =&gt; (
  &lt;TestContext.Consumer&gt;
    {value =&gt; value}
  &lt;/TestContext.Consumer&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">TestContext</span> <span class="pl-k">from</span> <span class="pl-s">'../context'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-v">TestContext</span><span class="pl-kos">.</span><span class="pl-v">Consumer</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-s1">value</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">value</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">TestContext</span><span class="pl-kos">.</span><span class="pl-v">Consumer</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">In <code class="notranslate">context.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'

export default React.createContext()"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Will result in:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1754873/39107043-d45bd2a6-4702-11e8-85a8-f04ef11bcb4b.png"><img width="570" alt="screen shot 2018-04-23 at 2 29 29 pm" src="https://user-images.githubusercontent.com/1754873/39107043-d45bd2a6-4702-11e8-85a8-f04ef11bcb4b.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>


<p dir="auto">A large motivation for the <code class="notranslate">pages/_app.js</code> feature is to be able to provide context persistently available across pages. It's unfortunate the current implementation does not support this basic use case.</p>
<p dir="auto">I'm attempting to isomorphically provide the cookie in context so that <a href="https://github.com/jaydenseric/graphql-react"><code class="notranslate">graphql-react</code></a> <code class="notranslate">&lt;Query /&gt;</code> components can get the user's access token to make GraphQL API requests. This approach used to work with separately decorated pages.</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>v6.0.0-canary.5</td>
</tr>
<tr>
<td>node</td>
<td>v9.11.1</td>
</tr>
</tbody>
</table>
<p dir="auto">Relates to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="240012766" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2438" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2438/hovercard" href="https://github.com/vercel/next.js/issues/2438">#2438</a> .</p>
<p dir="auto">If we add the same <code class="notranslate">&lt;link /&gt;</code> tag multiples in different <code class="notranslate">&lt;Head /&gt;</code>, they are duplicated in the rendered the DOM</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">multiple <code class="notranslate">&lt;link /&gt;</code> tags with exactly the same attributes should be du-duped when rendering HTML <code class="notranslate">&lt;head&gt;</code> elements</p>
<p dir="auto">e.g.<br>
component1.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Head from 'next/head'

&lt;Head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; /&gt;
&lt;/Head&gt;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Head</span> <span class="pl-k">from</span> <span class="pl-s">'next/head'</span><span class="pl-kos"></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">link</span> <span class="pl-c1">rel</span><span class="pl-c1">=</span><span class="pl-s">"stylesheet"</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/static/style.css"</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">Head</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">component2.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Head from 'next/head'
&lt;Head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; /&gt;
&lt;/Head&gt;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Head</span> <span class="pl-k">from</span> <span class="pl-s">'next/head'</span><span class="pl-kos"></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">link</span> <span class="pl-c1">rel</span><span class="pl-c1">=</span><span class="pl-s">"stylesheet"</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/static/style.css"</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">Head</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Then the rendered HTML should be, where duplicated  tags are unique'd</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;html&gt;
  &lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; class=&quot;next-head&quot; /&gt;
  &lt;/head&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">/static/style.css</span>" <span class="pl-c1">class</span>="<span class="pl-s">next-head</span>" /&gt;
  <span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">There will be duplicated  tags rendered</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;html&gt;
  &lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; class=&quot;next-head&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; class=&quot;next-head&quot; /&gt;
  &lt;/head&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">/static/style.css</span>" <span class="pl-c1">class</span>="<span class="pl-s">next-head</span>" /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">/static/style.css</span>" <span class="pl-c1">class</span>="<span class="pl-s">next-head</span>" /&gt;
  <span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">I am currently working on a solution with <code class="notranslate">react-apollo</code> which allows the data be pre-fetched before a new page is rendered at client side, the example <a href="https://github.com/zeit/next.js/tree/canary/examples/with-apollo-and-redux">with-apollo-redux</a> only supports prefetching data at server side, therefore, at client side I have to walk through the whole component tree again and do data fetching if one node from the component tree has been wrapped by the <code class="notranslate">graphql</code> HOC.</p>
<p dir="auto">Since the component tree contains <code class="notranslate">&lt;Head /&gt;</code> tags that produces side effects while going through the tree, so duplicated <code class="notranslate">&lt;link /&gt;</code> tags get inserted in the DOM. I was supposed to call <code class="notranslate">Head.rewind()</code> but it is not allowed at client side.</p>
<p dir="auto">As I know <a href="https://github.com/nfl/react-helmet">react-helmet</a> will not generate duplicated <code class="notranslate">&lt;link /&gt;</code> tags</p>
<p dir="auto">I know we should leave user the liberty of inserting duplicated <code class="notranslate">&lt;link /&gt;</code> tags if it is desired. But I believe in most cases user doesn't want it. So I am wondering if it would be OK by adding a <code class="notranslate">unique</code> flag on the tags so the <a href="https://github.com/zeit/next.js/blob/2ec397b3564d5dbca933e8def9cd0801ebd3a2b5/lib/head.js#L50">head.js</a> would de-dupe tags with <code class="notranslate">unique</code> specified.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Head from 'next/head'

&lt;Head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/style.css&quot; unique /&gt;
&lt;/Head&gt;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Head</span> <span class="pl-k">from</span> <span class="pl-s">'next/head'</span><span class="pl-kos"></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">link</span> <span class="pl-c1">rel</span><span class="pl-c1">=</span><span class="pl-s">"stylesheet"</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/static/style.css"</span> <span class="pl-c1">unique</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">Head</span><span class="pl-c1">&gt;</span></pre></div>