From 558632b5f2bb9c78e4a234813a07c45ccaacbf0c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 9 Jun 2023 19:18:19 +0200
Subject: [PATCH] Avoid server insertion react key warning (#51053)

Wrap server inseration children with react key to avoid react key
warning display
---
 packages/next/src/server/app-render/app-render.tsx | 8 ++++++--
 test/e2e/app-dir/rsc-basic/rsc-basic.test.ts       | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index a50cb0f3c101e..9a2685e99bdca 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -1458,8 +1458,12 @@ export async function renderToHTMLOrFlight(
             ReactDOMServer: require('react-dom/server.edge'),
             element: (
               <>
-                {Array.from(serverInsertedHTMLCallbacks).map((callback) =>
-                  callback()
+                {Array.from(serverInsertedHTMLCallbacks).map(
+                  (callback, index) => (
+                    <React.Fragment key={'_next_insert' + index}>
+                      {callback()}
+                    </React.Fragment>
+                  )
                 )}
                 {polyfillsFlushed
                   ? null
diff --git a/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts
index f6d58dc9eea02..1b6abcf013682 100644
--- a/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts
@@ -117,6 +117,9 @@ createNextDescribe(
         internalQueries.some((query) => content.includes(query))
       )
       expect(hasNextInternalQuery).toBe(false)
+      expect(next.cliOutput).not.toContain(
+        'Each child in a list should have a unique "key" prop'
+      )
     })
 
     it('should reuse the inline flight response without sending extra requests', async () => {