feat(gatsby): allow deduplicating head elements on id

[pieh]

Description

This is to properly support cases when there is global/generic/shared elements and specific pages/templates want to override it with children setup:

// somewhere in shared components
function SharedSeo({ children }) {
  return <>
    // `id` is important for deduplication
    <link id="icon" rel="icon" href="X" />
    {children}
  </>
}

// in page template
export function Head() {
  return <SharedSeo>
    <link id="icon" rel="icon" href="icon-specific-for-this-page" />
  </SharedSeo>
}

TODO:

• Replicate this in e2e-tests/production-runtime ( https://github.com/gatsbyjs/gatsby/pull/36138/files/3157d104ca1d3b9796f6dd652ab4c4bfef60e40f#diff-b719bec3cafff0f512dc6daff16ee4b0d94965be3bdcd3d2f97fd908e8d3ef3a )

Documentation

This is currently listed as limitation in https://github.com/gatsbyjs/gatsby/blob/docs/gatsby-head/docs/docs/reference/built-in-components/gatsby-head.md / #3612, which will need to be adjusted when this is merged

[ch53232]

[tyhopp]

Why does the browser version include validHeadNodes[indexOfPreviouslyInsertedNode].remove() but SSR doesn't?

[pieh]

.remove in browser is "just in case", we likely can drop it. SSR version is not rendering elements, it's rendering html strings, so it doesn't have potential DOM element to clean up - at most some no longere referenced strings/objects that can be GCed

[tyhopp]

Ah that makes sense, saw all the other lines seemed duplicated 1 for 1 so wanted to double check. Thanks!