Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 6, 2024

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented May 6, 2024

Required for #65058

In React 19, tags within <head> may be reordered to improve performance e.g. the viewport is floated earlier into the head.

This breaks the current mechanism of <Head> managing its children.
Every child of Head used to be prefixed with another <meta> tag that indicated that the next sibling would be managed by Next.js.

Since React now reorders tags, that sibling relationship is broken. Client-side reconciliation by the head-manager during navigation would be broken resulting in orphaned and dupliated <meta> tags.

We no longer prefix <Head> managed tags with a <meta> tag and instead mark them as owned via data-next-head.
The old algorithm was also O(n*m) and ignored reordering so we can do the same thing here.

Closes NEXT-3326

@eps1lon eps1lon changed the title Pages router: Use attribute-based head tags reconciler Pages router: Use attribute-based head tags reconciler when strictNextHead is enabled May 6, 2024
@ijjk
Copy link
Member

ijjk commented May 6, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented May 6, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
buildDuration 55.5s 23.5s N/A
buildDurationCached 12.6s 11.4s N/A
nodeModulesSize 360 MB 360 MB N/A
nextStartRea..uration (ms) 724ms 534ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
1103-HASH.js gzip 31.9 kB 31.9 kB N/A
1a9f679d-HASH.js gzip 53.5 kB 53.5 kB N/A
335-HASH.js gzip 5.05 kB 5.05 kB
7953.HASH.js gzip 169 B 169 B
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 231 B 228 B N/A
main-HASH.js gzip 31.6 kB 31.6 kB N/A
webpack-HASH.js gzip 1.65 kB 1.65 kB N/A
Overall change 50.4 kB 50.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
_app-HASH.js gzip 192 B 193 B N/A
_error-HASH.js gzip 192 B 193 B N/A
amp-HASH.js gzip 507 B 511 B N/A
css-HASH.js gzip 341 B 343 B N/A
dynamic-HASH.js gzip 2.52 kB 2.52 kB
edge-ssr-HASH.js gzip 266 B 265 B N/A
head-HASH.js gzip 362 B 365 B N/A
hooks-HASH.js gzip 392 B 392 B
image-HASH.js gzip 4.27 kB 4.27 kB
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.69 kB 2.7 kB N/A
routerDirect..HASH.js gzip 329 B 328 B N/A
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 324 B 324 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 8.27 kB 8.27 kB
Client Build Manifests
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
_buildManifest.js gzip 483 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
index.html gzip 527 B 527 B
link.html gzip 540 B 539 B N/A
withRouter.html gzip 523 B 523 B
Overall change 1.05 kB 1.05 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
edge-ssr.js gzip 94.8 kB 94.7 kB N/A
page.js gzip 182 kB 182 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
middleware-b..fest.js gzip 623 B 624 B N/A
middleware-r..fest.js gzip 156 B 156 B
middleware.js gzip 25.7 kB 25.7 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 995 B 995 B
Next Runtimes
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 98.8 kB 98.8 kB
app-page-tur..prod.js gzip 100 kB 100 kB
app-page-tur..prod.js gzip 94.6 kB 94.6 kB
app-page.run...dev.js gzip 157 kB 157 kB
app-page.run..prod.js gzip 93.3 kB 93.3 kB
app-route-ex...dev.js gzip 21.5 kB 21.5 kB
app-route-ex..prod.js gzip 15.3 kB 15.3 kB
app-route-tu..prod.js gzip 15.3 kB 15.3 kB
app-route-tu..prod.js gzip 15 kB 15 kB
app-route.ru...dev.js gzip 21.3 kB 21.3 kB
app-route.ru..prod.js gzip 15 kB 15 kB
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB
pages-turbo...prod.js gzip 21.5 kB 21.5 kB
pages.runtim...dev.js gzip 22.1 kB 22.1 kB
pages.runtim..prod.js gzip 21.5 kB 21.5 kB
server.runti..prod.js gzip 51.7 kB 51.7 kB
Overall change 964 kB 964 kB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/pages-router-head-csr-reconciler Change
0.pack gzip 1.62 MB 1.62 MB N/A
index.pack gzip 113 kB 114 kB ⚠️ +880 B
Overall change 113 kB 114 kB ⚠️ +880 B
Diff details
Diff for edge-ssr.js

Diff too large to display

Commit: e7ee686

@eps1lon eps1lon force-pushed the sebbie/pages-router-head-csr-reconciler branch 3 times, most recently from 6483771 to f882a38 Compare May 6, 2024 11:51
In React 19, tags within `<head>` may be reordered to improve performance e.g. the viewport is floated earlier into the head.

This breaks the current mechanism of `<Head>` managing its children.
Every child of `Head` used to be prefixed with another `<meta>` tag that indicated that the next sibling would be managed by Next.js.

Since React now reorders tags, that sibling relationship is broken. Client-side reconciliation by the `head-manager` during navigation would be broken resulting in orphaned and dupliated `<meta>` tags.

We no longer prefix `<Head>` managed tags with a `<meta>` tag and instead mark them as owned via `data-next-head`.
The old algorithm was also O(n*m) and ignored reordering so we can do the same thing here.
@eps1lon eps1lon force-pushed the sebbie/pages-router-head-csr-reconciler branch from f882a38 to e7ee686 Compare May 6, 2024 12:11
@eps1lon eps1lon marked this pull request as ready for review May 6, 2024 12:44
@eps1lon eps1lon changed the title Pages router: Use attribute-based head tags reconciler when strictNextHead is enabled Pages router: Use attribute-based head children reconciler when strictNextHead is enabled May 6, 2024
@eps1lon eps1lon merged commit 89d2abd into canary May 6, 2024
75 of 80 checks passed
@eps1lon eps1lon deleted the sebbie/pages-router-head-csr-reconciler branch May 6, 2024 17:32
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants