multiple <link /> tags get duplicated in <head /> #3169

liweinan0423 · 2017-10-25T05:16:09Z

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>

The text was updated successfully, but these errors were encountered:

timneutkens · 2017-10-25T05:51:33Z

@liweinan0423 I had a PR adding the React key property for next/head so you can dedupe tags, but we closed it as ZEIT didn't have a need for it anymore. Something like unique wouldn't work cause we'd have to dedupe all the tags manually while the user can just provide a key to make sure it's deduped, just like React does 👌 I'm not opposed to adding it 👍 What do you think about this proposal? We've talked about this quite extensive internally.

liweinan0423 · 2017-10-25T06:30:25Z

@timneutkens Thanks for your suggestion. I like the key property more than unique 😄 . I will try to send a PR.

timneutkens · 2017-10-25T07:29:05Z

@liweinan0423 you don't have to, I already did it a while ago. Will pull the fix back in and fix it 👌

liweinan0423 · 2017-10-25T08:47:45Z

@timneutkens After I finished my PR I saw your last comment. But could you review and feel free to close it and get in yours :)

SBoudrias · 2017-11-27T09:01:31Z

Did this got removed again somehow?

I'm using next@^4.1.4 and I'm still seeing duplicated style tags:

() => (
    <div>
            <Head>
                <style
                    key="aa-react-select-css"
                    data-source="aa-react-select-css"
                    type="text/css"
                    dangerouslySetInnerHTML={{ __html: cssStyle.toString() }}
                />
            </Head>
            <Etc />
    </div>
);

liweinan0423 · 2017-11-27T09:07:44Z

this change is in the canary branch now. please use next@canary for now

liweinan0423 mentioned this issue Oct 25, 2017

Support de-deduping head tags by setting key #3170

Merged

timneutkens closed this as completed in #3170 Oct 31, 2017

lock bot locked as resolved and limited conversation to collaborators Nov 27, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

multiple <link /> tags get duplicated in <head /> #3169

multiple <link /> tags get duplicated in <head /> #3169

liweinan0423 commented Oct 25, 2017 •

edited

timneutkens commented Oct 25, 2017

liweinan0423 commented Oct 25, 2017

timneutkens commented Oct 25, 2017

liweinan0423 commented Oct 25, 2017 •

edited

SBoudrias commented Nov 27, 2017

liweinan0423 commented Nov 27, 2017 •

edited

multiple <link /> tags get duplicated in <head /> #3169

multiple <link /> tags get duplicated in <head /> #3169

Comments

liweinan0423 commented Oct 25, 2017 • edited

Expected Behavior

Current Behavior

Context

timneutkens commented Oct 25, 2017

liweinan0423 commented Oct 25, 2017

timneutkens commented Oct 25, 2017

liweinan0423 commented Oct 25, 2017 • edited

SBoudrias commented Nov 27, 2017

liweinan0423 commented Nov 27, 2017 • edited

liweinan0423 commented Oct 25, 2017 •

edited

liweinan0423 commented Oct 25, 2017 •

edited

liweinan0423 commented Nov 27, 2017 •

edited