Pages router: Use attribute-based head children reconciler when strictNextHead is enabled (#65408)

Closes NEXT-3326

Author: eps1lon

packages/next/src/client/head-manager.ts

@@ -51,62 +51,56 @@ export function isEqualNode(oldTag: Element, newTag: Element) {
 let updateElements: (type: string, components: JSX.Element[]) => void
 
 if (process.env.__NEXT_STRICT_NEXT_HEAD) {
-  updateElements = (type: string, components: JSX.Element[]) => {
+  updateElements = (type, components) => {
     const headEl = document.querySelector('head')
     if (!headEl) return
 
-    const headMetaTags = headEl.querySelectorAll('meta[name="next-head"]') || []
-    const oldTags: Element[] = []
+    const oldTags = new Set(headEl.querySelectorAll(`${type}[data-next-head]`))
 
     if (type === 'meta') {
       const metaCharset = headEl.querySelector('meta[charset]')
-      if (metaCharset) {
-        oldTags.push(metaCharset)
+      if (metaCharset !== null) {
+        oldTags.add(metaCharset)
       }
     }
 
-    for (let i = 0; i < headMetaTags.length; i++) {
-      const metaTag = headMetaTags[i]
-      const headTag = metaTag.nextSibling as Element
-
-      if (headTag?.tagName?.toLowerCase() === type) {
-        oldTags.push(headTag)
-      }
-    }
-    const newTags = (components.map(reactElementToDOM) as HTMLElement[]).filter(
-      (newTag) => {
-        for (let k = 0, len = oldTags.length; k < len; k++) {
-          const oldTag = oldTags[k]
-          if (isEqualNode(oldTag, newTag)) {
-            oldTags.splice(k, 1)
-            return false
-          }
+    const newTags: Element[] = []
+    for (let i = 0; i < components.length; i++) {
+      const component = components[i]
+      const newTag = reactElementToDOM(component)
+      newTag.setAttribute('data-next-head', '')
+
+      let isNew = true
+      for (const oldTag of oldTags) {
+        if (isEqualNode(oldTag, newTag)) {
+          oldTags.delete(oldTag)
+          isNew = false
+          break
         }
-        return true
       }
-    )
 
-    oldTags.forEach((t) => {
-      const metaTag = t.previousSibling as Element
-      if (metaTag && metaTag.getAttribute('name') === 'next-head') {
-        t.parentNode?.removeChild(metaTag)
+      if (isNew) {
+        newTags.push(newTag)
       }
-      t.parentNode?.removeChild(t)
-    })
-    newTags.forEach((t) => {
-      const meta = document.createElement('meta')
-      meta.name = 'next-head'
-      meta.content = '1'
+    }
+
+    for (const oldTag of oldTags) {
+      oldTag.parentNode?.removeChild(oldTag)
+    }
 
+    for (const newTag of newTags) {
       // meta[charset] must be first element so special case
-      if (!(t.tagName?.toLowerCase() === 'meta' && t.getAttribute('charset'))) {
-        headEl.appendChild(meta)
+      if (
+        newTag.tagName.toLowerCase() === 'meta' &&
+        newTag.getAttribute('charset') !== null
+      ) {
+        headEl.prepend(newTag)
       }
-      headEl.appendChild(t)
-    })
+      headEl.appendChild(newTag)
+    }
   }
 } else {
-  updateElements = (type: string, components: JSX.Element[]) => {
+  updateElements = (type, components) => {
     const headEl = document.getElementsByTagName('head')[0]
     const headCountEl: HTMLMetaElement = headEl.querySelector(
       'meta[name=next-head-count]'

packages/next/src/pages/_document.tsx

@@ -682,30 +682,29 @@ export class Head extends React.Component<HeadProps> {
     let cssPreloads: Array<JSX.Element> = []
     let otherHeadElements: Array<JSX.Element> = []
     if (head) {
-      head.forEach((c) => {
-        let metaTag
-
-        if (this.context.strictNextHead) {
-          metaTag = React.createElement('meta', {
-            name: 'next-head',
-            content: '1',
-          })
-        }
-
+      head.forEach((child) => {
         if (
-          c &&
-          c.type === 'link' &&
-          c.props['rel'] === 'preload' &&
-          c.props['as'] === 'style'
+          child &&
+          child.type === 'link' &&
+          child.props['rel'] === 'preload' &&
+          child.props['as'] === 'style'
         ) {
-          metaTag && cssPreloads.push(metaTag)
-          cssPreloads.push(c)
+          if (this.context.strictNextHead) {
+            cssPreloads.push(
+              React.cloneElement(child, { 'data-next-head': '' })
+            )
+          } else {
+            cssPreloads.push(child)
+          }
         } else {
-          if (c) {
-            if (metaTag && (c.type !== 'meta' || !c.props['charSet'])) {
-              otherHeadElements.push(metaTag)
+          if (child) {
+            if (this.context.strictNextHead) {
+              otherHeadElements.push(
+                React.cloneElement(child, { 'data-next-head': '' })
+              )
+            } else {
+              otherHeadElements.push(child)
             }
-            otherHeadElements.push(c)
           }
         }
       })

test/development/pages-dir/client-navigation/index.test.ts

@@ -1683,13 +1683,19 @@ describe.each([[false], [true]])(
         expect(
           Number(await browser.eval('window.__test_async_executions'))
         ).toBe(1)
+        expect(
+          Number(await browser.eval('window.__test_defer_executions'))
+        ).toBe(1)
 
         await browser.elementByCss('#toggleScript').click()
         await waitFor(2000)
 
         expect(
           Number(await browser.eval('window.__test_async_executions'))
         ).toBe(1)
+        expect(
+          Number(await browser.eval('window.__test_defer_executions'))
+        ).toBe(1)
       } finally {
         if (browser) {
           await browser.close()