Issue 1:
React v16.3 context provided in pages/_app.js can be consumed and rendered in pages on the client, but is undefined in SSR. This causes React SSR markup mismatch errors.

Note that context can be universally provided/consumed within pages/_app.js, the issue is specifically when providing context in pages/_app.js and consuming it in a page such as pages/index.js.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Context provided in pages/_app.js should be consumable in pages both on the server for SSR and when browser rendering.

Current Behavior

Context provided in pages/_app.js is undefined when consumed in pages for SSR. It can only be consumed for client rendering.

Steps to Reproduce (for bugs)

In pages/_app.js:

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 (
<Container>
<TestContext.Provider value="Test value.">
<Component {...pageProps} />
</TestContext.Provider>
</Container>
)
}
}

In pages/index.js:

import TestContext from '../context'

export default () => (
<TestContext.Consumer>
{value => value}
</TestContext.Consumer>
)

In context.js:

import React from 'react'

export default React.createContext()

Will result in:

Context

A large motivation for the pages/_app.js 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.

I'm attempting to isomorphically provide the cookie in context so that graphql-react <Query /> components can get the user's access token to make GraphQL API requests. This approach used to work with separately decorated pages.

Your Environment

Tech
Version

next
v6.0.0-canary.5

node
v9.11.1

Issue 2:
Relates to #2438 .

If we add the same <link /> tag multiples in different <Head />, they are duplicated in the rendered the DOM

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

multiple <link /> tags with exactly the same attributes should be du-duped when rendering HTML <head> elements

e.g.

component1.js

import Head from 'next/head'

<Head>
<link rel="stylesheet" href="/static/style.css" />
</Head>

component2.js

import Head from 'next/head'
<Head>
<link rel="stylesheet" href="/static/style.css" />
</Head>

Then the rendered HTML should be, where duplicated tags are unique'd

<html>
<head>
<link rel="stylesheet" href="/static/style.css" class="next-head" />
</head>
</html>

Current Behavior

There will be duplicated tags rendered

<html>
<head>
<link rel="stylesheet" href="/static/style.css" class="next-head" />
<link rel="stylesheet" href="/static/style.css" class="next-head" />
</head>
</html>

Context

I am currently working on a solution with react-apollo which allows the data be pre-fetched before a new page is rendered at client side, the example with-apollo-redux 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 graphql HOC.

Since the component tree contains <Head /> tags that produces side effects while going through the tree, so duplicated <link /> tags get inserted in the DOM. I was supposed to call Head.rewind() but it is not allowed at client side.

As I know react-helmet will not generate duplicated <link /> tags

I know we should leave user the liberty of inserting duplicated <link /> 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 unique flag on the tags so the head.js would de-dupe tags with unique specified.

import Head from 'next/head'

<Head>
<link rel="stylesheet" href="/static/style.css" unique />
</Head>