Skip to content

Commit

Permalink
Perf: reduce metadata RSC payload (#50678)
Browse files Browse the repository at this point in the history 
### What
Currently when all the metadata rendered as JSX as server components, all the empty metadata which should be skipped as they're rendered as `null` in JSX, are still included in the RSC payload. This helps reduce the initial html size.

### How

Change the JSX components into function calls, and filter out the nullable component that won't be rendered, then they won't show up in the react tree and be serialized.

Before
```
self.__next_f.push([1, "5:[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],null,null,null,null,null,null,null,null,null,null,[\"$\",\"meta\",null,{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,null,null,null,null]\n"])
```

After
```
self.__next_f.push([1, "5:[[[\"$\",\"meta\",\"charset\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"viewport:width=device-width, initial-scale=1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]]\n"])
```


Closes NEXT-1232
  • Loading branch information
@huozhi
huozhi committed Jun 2, 2023
1 parent 89a62ac commit 1b9fea7
Show file tree
Hide file tree
Showing 6 changed files with 432 additions and 481 deletions.
68 changes: 27 additions & 41 deletions packages/next/src/lib/metadata/generate/alternate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { ResolvedMetadata } from '../types/metadata-interface'

import React from 'react'
import { AlternateLinkDescriptor } from '../types/alternative-urls-types'
import { MetaFilter } from './meta'

function AlternateLink({
descriptor,
Expand All @@ -25,48 +26,33 @@ export function AlternatesMetadata({
alternates: ResolvedMetadata['alternates']
}) {
if (!alternates) return null

const { canonical, languages, media, types } = alternates
return (
<>
{canonical ? (
<AlternateLink rel="canonical" descriptor={canonical} />
) : null}
{languages
? Object.entries(languages).map(([locale, descriptors]) => {
return descriptors?.map((descriptor, index) => (
<AlternateLink
rel="alternate"
key={index}
hrefLang={locale}
descriptor={descriptor}
/>
))
})
: null}
{media
? Object.entries(media).map(([mediaName, descriptors]) =>
descriptors?.map((descriptor, index) => (
<AlternateLink
rel="alternate"
key={index}
media={mediaName}
descriptor={descriptor}
/>
))

return MetaFilter([
canonical
? AlternateLink({ rel: 'canonical', descriptor: canonical })
: null,
languages
? Object.entries(languages).flatMap(([locale, descriptors]) =>
descriptors?.map((descriptor) =>
AlternateLink({ rel: 'alternate', hrefLang: locale, descriptor })
)
: null}
{types
? Object.entries(types).map(([type, descriptors]) =>
descriptors?.map((descriptor, index) => (
<AlternateLink
rel="alternate"
key={index}
type={type}
descriptor={descriptor}
/>
))
)
: null,
media
? Object.entries(media).flatMap(([mediaName, descriptors]) =>
descriptors?.map((descriptor) =>
AlternateLink({ rel: 'alternate', media: mediaName, descriptor })
)
: null}
</>
)
)
: null,
types
? Object.entries(types).flatMap(([type, descriptors]) =>
descriptors?.map((descriptor) =>
AlternateLink({ rel: 'alternate', type, descriptor })
)
)
: null,
])
}
217 changes: 107 additions & 110 deletions packages/next/src/lib/metadata/generate/basic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,76 @@
import type { ResolvedMetadata } from '../types/metadata-interface'

import React from 'react'
import { Meta, MultiMeta } from './meta'
import { Meta, MetaFilter, MultiMeta } from './meta'

export function BasicMetadata({ metadata }: { metadata: ResolvedMetadata }) {
return (
<>
<meta charSet="utf-8" />
{metadata.title !== null && metadata.title.absolute ? (
<title>{metadata.title.absolute}</title>
) : null}
<Meta name="description" content={metadata.description} />
<Meta name="application-name" content={metadata.applicationName} />
{metadata.authors
? metadata.authors.map((author, index) => (
<React.Fragment key={index}>
{author.url && <link rel="author" href={author.url.toString()} />}
<Meta name="author" content={author.name} />
</React.Fragment>
))
: null}
{metadata.manifest ? (
<link rel="manifest" href={metadata.manifest.toString()} />
) : null}
<Meta name="generator" content={metadata.generator} />
<Meta name="keywords" content={metadata.keywords?.join(',')} />
<Meta name="referrer" content={metadata.referrer} />
{metadata.themeColor
? metadata.themeColor.map((themeColor, index) => (
<Meta
key={index}
name="theme-color"
content={themeColor.color}
media={themeColor.media}
/>
))
: null}
<Meta name="color-scheme" content={metadata.colorScheme} />
<Meta name="viewport" content={metadata.viewport} />
<Meta name="creator" content={metadata.creator} />
<Meta name="publisher" content={metadata.publisher} />
<Meta name="robots" content={metadata.robots?.basic} />
<Meta name="googlebot" content={metadata.robots?.googleBot} />
<Meta name="abstract" content={metadata.abstract} />
{metadata.archives
? metadata.archives.map((archive) => (
<link rel="archives" href={archive} key={archive} />
))
: null}
{metadata.assets
? metadata.assets.map((asset) => (
<link rel="assets" href={asset} key={asset} />
))
: null}
{metadata.bookmarks
? metadata.bookmarks.map((bookmark) => (
<link rel="bookmarks" href={bookmark} key={bookmark} />
))
: null}
<Meta name="category" content={metadata.category} />
<Meta name="classification" content={metadata.classification} />
{metadata.other
? Object.entries(metadata.other).map(([name, content]) => (
<Meta
key={name}
name={name}
content={Array.isArray(content) ? content.join(',') : content}
return MetaFilter([
<meta key="charset" charSet="utf-8" />,
metadata.title !== null && metadata.title.absolute ? (
<title key="title">{metadata.title.absolute}</title>
) : null,
Meta({ name: 'description', content: metadata.description }),
Meta({ name: 'application-name', content: metadata.applicationName }),
...(metadata.authors
? metadata.authors.map((author, index) => [
author.url ? (
<link
key={'author' + index}
rel="author"
href={author.url.toString()}
/>
))
: null}
</>
)
) : null,
Meta({ name: 'author', content: author.name }),
])
: []),
metadata.manifest ? (
<link key="manifest" rel="manifest" href={metadata.manifest.toString()} />
) : null,
Meta({ name: 'generator', content: metadata.generator }),
Meta({ name: 'keywords', content: metadata.keywords?.join(',') }),
Meta({ name: 'referrer', content: metadata.referrer }),
...(metadata.themeColor
? metadata.themeColor.map((themeColor) =>
Meta({
name: 'theme-color',
content: themeColor.color,
media: themeColor.media,
})
)
: []),
Meta({ name: 'color-scheme', content: metadata.colorScheme }),
Meta({ name: 'viewport', content: metadata.viewport }),
Meta({ name: 'creator', content: metadata.creator }),
Meta({ name: 'publisher', content: metadata.publisher }),
Meta({ name: 'robots', content: metadata.robots?.basic }),
Meta({ name: 'googlebot', content: metadata.robots?.googleBot }),
Meta({ name: 'abstract', content: metadata.abstract }),
...(metadata.archives
? metadata.archives.map((archive) => (
<link rel="archives" href={archive} key={archive} />
))
: []),
...(metadata.assets
? metadata.assets.map((asset) => (
<link rel="assets" href={asset} key={asset} />
))
: []),
...(metadata.bookmarks
? metadata.bookmarks.map((bookmark) => (
<link rel="bookmarks" href={bookmark} key={bookmark} />
))
: []),
Meta({ name: 'category', content: metadata.category }),
Meta({ name: 'classification', content: metadata.classification }),
...(metadata.other
? Object.entries(metadata.other).map(([name, content]) =>
Meta({
name,
content: Array.isArray(content) ? content.join(',') : content,
})
)
: []),
])
}

export function ItunesMeta({ itunes }: { itunes: ResolvedMetadata['itunes'] }) {
Expand Down Expand Up @@ -112,32 +112,31 @@ export function AppleWebAppMeta({
appleWebApp: ResolvedMetadata['appleWebApp']
}) {
if (!appleWebApp) return null

const { capable, title, startupImage, statusBarStyle } = appleWebApp

return (
<>
{capable ? (
<meta name="apple-mobile-web-app-capable" content="yes" />
) : null}
<Meta name="apple-mobile-web-app-title" content={title} />
{startupImage
? startupImage.map((image, index) => (
<link
key={index}
href={image.url}
media={image.media}
rel="apple-touch-startup-image"
/>
))
: null}
{statusBarStyle ? (
<meta
name="apple-mobile-web-app-status-bar-style"
content={statusBarStyle}
/>
) : null}
</>
)
return MetaFilter([
capable
? Meta({ name: 'apple-mobile-web-app-capable', content: 'yes' })
: null,
Meta({ name: 'apple-mobile-web-app-title', content: title }),
...(startupImage
? startupImage.map((image, index) => (
<link
key={index}
href={image.url}
media={image.media}
rel="apple-touch-startup-image"
/>
))
: []),
statusBarStyle
? Meta({
name: 'apple-mobile-web-app-status-bar-style',
content: statusBarStyle,
})
: null,
])
}

export function VerificationMeta({
Expand All @@ -147,23 +146,21 @@ export function VerificationMeta({
}) {
if (!verification) return null

return (
<>
<MultiMeta
namePrefix="google-site-verification"
contents={verification.google}
/>
<MultiMeta namePrefix="y_key" contents={verification.yahoo} />
<MultiMeta
namePrefix="yandex-verification"
contents={verification.yandex}
/>
<MultiMeta namePrefix="me" contents={verification.me} />
{verification.other
? Object.entries(verification.other).map(([key, value], index) => (
<MultiMeta key={key + index} namePrefix={key} contents={value} />
))
: null}
</>
)
return MetaFilter([
MultiMeta({
namePrefix: 'google-site-verification',
contents: verification.google,
}),
MultiMeta({ namePrefix: 'y_key', contents: verification.yahoo }),
MultiMeta({
namePrefix: 'yandex-verification',
contents: verification.yandex,
}),
MultiMeta({ namePrefix: 'me', contents: verification.me }),
...(verification.other
? Object.entries(verification.other).map(([key, value]) =>
MultiMeta({ namePrefix: key, contents: value })
)
: []),
])
}
43 changes: 11 additions & 32 deletions packages/next/src/lib/metadata/generate/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { ResolvedMetadata } from '../types/metadata-interface'
import type { Icon, IconDescriptor } from '../types/metadata-types'

import React from 'react'
import { MetaFilter } from './meta'

function IconDescriptorLink({ icon }: { icon: IconDescriptor }) {
const { url, rel = 'icon', ...props } = icon
Expand All @@ -27,36 +28,14 @@ export function IconsMetadata({ icons }: { icons: ResolvedMetadata['icons'] }) {
const appleList = icons.apple
const otherList = icons.other

return (
<>
{shortcutList
? shortcutList.map((icon, index) => (
<IconLink
key={`shortcut-${index}`}
rel="shortcut icon"
icon={icon}
/>
))
: null}
{iconList
? iconList.map((icon, index) => (
<IconLink key={`shortcut-${index}`} rel="icon" icon={icon} />
))
: null}
{appleList
? appleList.map((icon, index) => (
<IconLink
key={`apple-${index}`}
rel="apple-touch-icon"
icon={icon}
/>
))
: null}
{otherList
? otherList.map((icon, index) => (
<IconDescriptorLink key={`other-${index}`} icon={icon} />
))
: null}
</>
)
return MetaFilter([
shortcutList
? shortcutList.map((icon) => IconLink({ rel: 'shortcut icon', icon }))
: null,
iconList ? iconList.map((icon) => IconLink({ rel: 'icon', icon })) : null,
appleList
? appleList.map((icon) => IconLink({ rel: 'apple-touch-icon', icon }))
: null,
otherList ? otherList.map((icon) => IconDescriptorLink({ icon })) : null,
])
}

0 comments on commit 1b9fea7

Please sign in to comment.