Shrink the react key size in metadata RSC payload

packages/next/src/lib/metadata/generate/basic.tsx

@@ -5,26 +5,22 @@ import { Meta, MetaFilter, MultiMeta } from './meta'
 
 export function BasicMetadata({ metadata }: { metadata: ResolvedMetadata }) {
   return MetaFilter([
-    <meta key="charset" charSet="utf-8" />,
+    <meta charSet="utf-8" />,
     metadata.title !== null && metadata.title.absolute ? (
-      <title key="title">{metadata.title.absolute}</title>
+      <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) => [
+      ? metadata.authors.map((author) => [
           author.url ? (
-            <link
-              key={'author' + index}
-              rel="author"
-              href={author.url.toString()}
-            />
+            <link rel="author" href={author.url.toString()} />
           ) : null,
           Meta({ name: 'author', content: author.name }),
         ])
       : []),
     metadata.manifest ? (
-      <link key="manifest" rel="manifest" href={metadata.manifest.toString()} />
+      <link rel="manifest" href={metadata.manifest.toString()} />
     ) : null,
     Meta({ name: 'generator', content: metadata.generator }),
     Meta({ name: 'keywords', content: metadata.keywords?.join(',') }),
@@ -47,17 +43,15 @@ export function BasicMetadata({ metadata }: { metadata: ResolvedMetadata }) {
     Meta({ name: 'abstract', content: metadata.abstract }),
     ...(metadata.archives
       ? metadata.archives.map((archive) => (
-          <link rel="archives" href={archive} key={archive} />
+          <link rel="archives" href={archive} />
         ))
       : []),
     ...(metadata.assets
-      ? metadata.assets.map((asset) => (
-          <link rel="assets" href={asset} key={asset} />
-        ))
+      ? metadata.assets.map((asset) => <link rel="assets" href={asset} />)
       : []),
     ...(metadata.bookmarks
       ? metadata.bookmarks.map((bookmark) => (
-          <link rel="bookmarks" href={bookmark} key={bookmark} />
+          <link rel="bookmarks" href={bookmark} />
         ))
       : []),
     Meta({ name: 'category', content: metadata.category }),
@@ -120,16 +114,15 @@ export function AppleWebAppMeta({
       ? Meta({ name: 'apple-mobile-web-app-capable', content: 'yes' })
       : null,
     Meta({ name: 'apple-mobile-web-app-title', content: title }),
-    ...(startupImage
-      ? startupImage.map((image, index) => (
+    startupImage
+      ? startupImage.map((image) => (
           <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',

packages/next/src/lib/metadata/generate/icons.tsx

@@ -13,7 +13,7 @@ function IconDescriptorLink({ icon }: { icon: IconDescriptor }) {
 function IconLink({ rel, icon }: { rel?: string; icon: Icon }) {
   if (typeof icon === 'object' && !(icon instanceof URL)) {
     if (!icon.rel && rel) icon.rel = rel
-    return <IconDescriptorLink icon={icon} />
+    return IconDescriptorLink({ icon })
   } else {
     const href = icon.toString()
     return <link rel={rel} href={href} />

packages/next/src/lib/metadata/generate/meta.tsx

@@ -15,7 +15,6 @@ export function Meta({
   if (typeof content !== 'undefined' && content !== null && content !== '') {
     return (
       <meta
-        key={(name || property) + ':' + content}
         {...(name ? { name } : { property })}
         {...(media ? { media } : undefined)}
         content={typeof content === 'string' ? content : content.toString()}
@@ -28,10 +27,15 @@ export function Meta({
 export function MetaFilter<T extends {} | {}[]>(
   items: (T | null)[]
 ): NonNullable<T>[] {
-  return items.filter(
-    (item): item is NonNullable<T> =>
-      nonNullable(item) && !(Array.isArray(item) && item.length === 0)
-  )
+  const acc: NonNullable<T>[] = []
+  for (const item of items) {
+    if (Array.isArray(item)) {
+      acc.push(...item.filter(nonNullable))
+    } else if (nonNullable(item)) {
+      acc.push(item)
+    }
+  }
+  return acc
 }
 
 type ExtendMetaContent = Record<
@@ -70,18 +74,16 @@ function ExtendMeta({
   namePrefix?: string
   propertyPrefix?: string
 }) {
-  const keyPrefix = namePrefix || propertyPrefix
   if (!content) return null
   return MetaFilter(
-    Object.entries(content).map(([k, v], index) => {
-      return typeof v === 'undefined' ? null : (
-        <Meta
-          key={keyPrefix + ':' + k + '_' + index}
-          {...(propertyPrefix && { property: getMetaKey(propertyPrefix, k) })}
-          {...(namePrefix && { name: getMetaKey(namePrefix, k) })}
-          content={typeof v === 'string' ? v : v?.toString()}
-        />
-      )
+    Object.entries(content).map(([k, v]) => {
+      return typeof v === 'undefined'
+        ? null
+        : Meta({
+            ...(propertyPrefix && { property: getMetaKey(propertyPrefix, k) }),
+            ...(namePrefix && { name: getMetaKey(namePrefix, k) }),
+            content: typeof v === 'string' ? v : v?.toString(),
+          })
     })
   )
 }

packages/next/src/lib/metadata/generate/opengraph.tsx

@@ -225,14 +225,14 @@ function TwitterAppItem({
   app: TwitterAppDescriptor
   type: 'iphone' | 'ipad' | 'googleplay'
 }) {
-  return MetaFilter([
+  return [
     Meta({ name: `twitter:app:name:${type}`, content: app.name }),
     Meta({ name: `twitter:app:id:${type}`, content: app.id[type] }),
     Meta({
       name: `twitter:app:url:${type}`,
       content: app.url?.[type]?.toString(),
     }),
-  ])
+  ]
 }
 
 export function TwitterMetadata({

packages/next/src/lib/metadata/metadata.tsx

@@ -56,6 +56,11 @@ export async function MetadataTree({
     IconsMetadata({ icons: metadata.icons }),
   ])
 
-  // Wrap with fragment and key to skip react array-key warnings.
-  return <>{elements}</>
+  return (
+    <>
+      {elements.map((el, index) => {
+        return React.cloneElement(el as React.ReactElement, { key: index })
+      })}
+    </>
+  )
 }