Ensure headers instance is serialized (#51047)

This makes sure we properly include headers in the cache key when a
headers instance is used.

x-ref: [slack
thread](https://vercel.slack.com/archives/C042LHPJ1NX/p1686234796532989)

packages/next/src/server/lib/incremental-cache/index.ts

@@ -288,7 +288,9 @@ export class IncrementalCache {
       this.fetchCacheKeyPrefix || '',
       url,
       init.method,
-      init.headers,
+      typeof (init.headers || {}).keys === 'function'
+        ? Object.fromEntries(init.headers as Headers)
+        : init.headers,
       init.mode,
       init.redirect,
       init.credentials,

test/e2e/app-dir/app-static/app-static.test.ts

@@ -34,6 +34,21 @@ createNextDescribe(
       }
     })
 
+    it('should correctly include headers instance in cache key', async () => {
+      const res = await next.fetch('/variable-revalidate/headers-instance')
+      expect(res.status).toBe(200)
+
+      const html = await res.text()
+      const $ = cheerio.load(html)
+
+      const data1 = $('#page-data').text()
+      const data2 = $('#page-data2').text()
+      expect(data1).not.toBe(data2)
+
+      expect(data1).toBeTruthy()
+      expect(data2).toBeTruthy()
+    })
+
     it.skip.each([
       {
         path: '/react-fetch-deduping-node',
@@ -572,6 +587,9 @@ createNextDescribe(
           'variable-revalidate/encoding.html',
           'variable-revalidate/encoding.rsc',
           'variable-revalidate/encoding/page.js',
+          'variable-revalidate/headers-instance.html',
+          'variable-revalidate/headers-instance.rsc',
+          'variable-revalidate/headers-instance/page.js',
           'variable-revalidate/no-store/page.js',
           'variable-revalidate/post-method-request/page.js',
           'variable-revalidate/post-method.html',
@@ -813,6 +831,11 @@ createNextDescribe(
             initialRevalidateSeconds: 3,
             srcRoute: '/variable-revalidate/encoding',
           },
+          '/variable-revalidate/headers-instance': {
+            dataRoute: '/variable-revalidate/headers-instance.rsc',
+            initialRevalidateSeconds: 10,
+            srcRoute: '/variable-revalidate/headers-instance',
+          },
           '/variable-revalidate/post-method': {
             dataRoute: '/variable-revalidate/post-method.rsc',
             initialRevalidateSeconds: 10,

test/e2e/app-dir/app-static/app/variable-revalidate/headers-instance/page.js

@@ -0,0 +1,46 @@
+const fetchRetry = async (url, init) => {
+  for (let i = 0; i < 5; i++) {
+    try {
+      return await fetch(url, init)
+    } catch (err) {
+      if (i === 4) {
+        throw err
+      }
+      console.log(`Failed to fetch`, err, `retrying...`)
+    }
+  }
+}
+
+export default async function Page() {
+  const data = await fetchRetry(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      headers: new Headers({
+        'x-hello': 'world',
+      }),
+      next: {
+        revalidate: false,
+      },
+    }
+  ).then((res) => res.text())
+
+  const data2 = await fetchRetry(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      headers: new Headers({
+        'x-hello': 'again',
+      }),
+      next: {
+        revalidate: false,
+      },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      <p id="page">/variable-revalidate/post-method-cached</p>
+      <p id="page-data">{data}</p>
+      <p id="page-data2">{data2}</p>
+    </>
+  )
+}