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

[metadata] Move metadata rendering adjacent to page component #74262

Merged
merged 9 commits into from
Jan 6, 2025

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Dec 24, 2024

What

This work prepares for streaming metadata by moving metadata from the top-level head component into the body, rendering it just before and adjacent to the page component. In the future, we’ll wrap it with a suspense boundary, depending on whether the request's user agent supports streaming rendering.

Minor Changes

  • Move charset into viewport at early top as according to spec: <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.
  • Replace the previous metadata data in the HeadData to null. It will be changed back to single ReactNode later in [metadata] Change the array head to single node in flight data #74299

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Dec 24, 2024
Copy link
Member Author

huozhi commented Dec 24, 2024

@huozhi huozhi changed the title Move metadata tree next to page component [metadata] Move metadata rendering adjacent to page component Dec 24, 2024
@ijjk
Copy link
Member

ijjk commented Dec 24, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Dec 24, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
buildDuration 25s 22s N/A
buildDurationCached 20.7s 17.8s N/A
nodeModulesSize 417 MB 417 MB ⚠️ +24 kB
nextStartRea..uration (ms) 580ms 570ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
1187-HASH.js gzip 52.6 kB 52.6 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 52.9 kB 52.9 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 233 B 235 B N/A
main-HASH.js gzip 34.1 kB 34.1 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
index.html gzip 524 B 523 B N/A
link.html gzip 540 B 537 B N/A
withRouter.html gzip 521 B 520 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 206 kB 206 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
middleware-b..fest.js gzip 672 B 669 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 363 kB 363 kB N/A
app-page-exp..prod.js gzip 129 kB 129 kB N/A
app-page-tur..prod.js gzip 142 kB 142 kB N/A
app-page-tur..prod.js gzip 138 kB 138 kB N/A
app-page.run...dev.js gzip 352 kB 352 kB N/A
app-page.run..prod.js gzip 125 kB 125 kB N/A
app-route-ex...dev.js gzip 37.5 kB 37.5 kB
app-route-ex..prod.js gzip 25.5 kB 25.5 kB
app-route-tu..prod.js gzip 25.5 kB 25.5 kB
app-route-tu..prod.js gzip 25.4 kB 25.4 kB
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.7 kB 21.7 kB
pages.runtim...dev.js gzip 27.5 kB 27.5 kB
pages.runtim..prod.js gzip 21.7 kB 21.7 kB
server.runti..prod.js gzip 916 kB 916 kB
Overall change 1.2 MB 1.2 MB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js huozhi/12-23-_move_metadata_render Change
0.pack gzip 2.09 MB 2.09 MB ⚠️ +770 B
index.pack gzip 75.5 kB 75 kB N/A
Overall change 2.09 MB 2.09 MB ⚠️ +770 B
Diff details
Diff for 1187-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 9be477c

@huozhi huozhi force-pushed the huozhi/12-23-_move_metadata_render branch from ed35f62 to 9be477c Compare January 6, 2025 10:52
@huozhi huozhi marked this pull request as ready for review January 6, 2025 11:40
@huozhi huozhi requested review from gnoff and ztanner January 6, 2025 11:40
@@ -409,7 +392,35 @@ async function createComponentTreeInternal({
workStore.rootParams = currentParams
}

//
// Only render metadata on the actual SSR'd segment not the `default` segment,
// as it's used as a placeholder for navigation.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you clarify this a bit more? the default segment could be what's SSRed when you load a page that has no page.tsx in a particular slot, but has a default.tsx

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally it shouldn't render.
When the page is missing it renders 404, when the default of slot is rendered, it shouldn't overide the page metadata. However I found this is not running as expected right now. Created another task to track this issue and we can fix separately, as it's same between this branch and canary branch. I can follow up later

@huozhi huozhi requested a review from ztanner January 6, 2025 18:32
@huozhi huozhi merged commit 90fbbf3 into canary Jan 6, 2025
130 checks passed
@huozhi huozhi deleted the huozhi/12-23-_move_metadata_render branch January 6, 2025 20:30
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 22, 2025
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