From 7af075b3db967e706dae578cc958394c388fa5bc Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 12 May 2024 00:40:40 -0700
Subject: [PATCH 1/6] support inlining binary flight payload

---
 packages/next/src/client/app-index.tsx        | 14 ++++-
 .../server/app-render/use-flight-response.tsx | 61 ++++++++++++++-----
 test/e2e/app-dir/actions/app/binary/action.js |  7 +++
 test/e2e/app-dir/actions/app/binary/client.js | 44 +++++++++++++
 test/e2e/app-dir/actions/app/binary/page.js   | 30 +++++++++
 test/e2e/app-dir/actions/next.config.js       |  3 +
 6 files changed, 143 insertions(+), 16 deletions(-)
 create mode 100644 test/e2e/app-dir/actions/app/binary/action.js
 create mode 100644 test/e2e/app-dir/actions/app/binary/client.js
 create mode 100644 test/e2e/app-dir/actions/app/binary/page.js

diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
index f59ee8507b412..0fe072089535b 100644
--- a/packages/next/src/client/app-index.tsx
+++ b/packages/next/src/client/app-index.tsx
@@ -43,7 +43,7 @@ const appElement: HTMLElement | Document | null = document
 
 const encoder = new TextEncoder()
 
-let initialServerDataBuffer: string[] | undefined = undefined
+let initialServerDataBuffer: (string | Uint8Array)[] | undefined = undefined
 let initialServerDataWriter: ReadableStreamDefaultController | undefined =
   undefined
 let initialServerDataLoaded = false
@@ -56,6 +56,7 @@ function nextServerDataCallback(
     | [isBootStrap: 0]
     | [isNotBootstrap: 1, responsePartial: string]
     | [isFormState: 2, formState: any]
+    | [isBinary: 3, responsePartial: Uint8Array]
 ): void {
   if (seg[0] === 0) {
     initialServerDataBuffer = []
@@ -70,6 +71,15 @@ function nextServerDataCallback(
     }
   } else if (seg[0] === 2) {
     initialFormStateData = seg[1]
+  } else if (seg[0] === 3) {
+    if (!initialServerDataBuffer)
+      throw new Error('Unexpected server data: missing bootstrap script.')
+
+    if (initialServerDataWriter) {
+      initialServerDataWriter.enqueue(seg[1])
+    } else {
+      initialServerDataBuffer.push(seg[1])
+    }
   }
 }
 
@@ -84,7 +94,7 @@ function nextServerDataCallback(
 function nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {
   if (initialServerDataBuffer) {
     initialServerDataBuffer.forEach((val) => {
-      ctr.enqueue(encoder.encode(val))
+      ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)
     })
     if (initialServerDataLoaded && !initialServerDataFlushed) {
       ctr.close()
diff --git a/packages/next/src/server/app-render/use-flight-response.tsx b/packages/next/src/server/app-render/use-flight-response.tsx
index 6069a71aff358..82b87a74bcb01 100644
--- a/packages/next/src/server/app-render/use-flight-response.tsx
+++ b/packages/next/src/server/app-render/use-flight-response.tsx
@@ -9,6 +9,7 @@ const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'
 const INLINE_FLIGHT_PAYLOAD_BOOTSTRAP = 0
 const INLINE_FLIGHT_PAYLOAD_DATA = 1
 const INLINE_FLIGHT_PAYLOAD_FORM_STATE = 2
+const INLINE_FLIGHT_PAYLOAD_BINARY = 3
 
 const flightResponses = new WeakMap<BinaryStreamOf<any>, Promise<any>>()
 const encoder = new TextEncoder()
@@ -78,6 +79,25 @@ export async function flightRenderComplete(
   }
 }
 
+const decoder = new TextDecoder('utf-8', { fatal: true })
+
+/**
+ * This function will attempt to decode a Uint8Array as a UTF-8 string. If the
+ * data is not valid UTF-8 it will return null.
+ *
+ * @param value A Uint8Array that can contain arbitrary data.
+ */
+function tryDecodeAsUtf8String(
+  value: Uint8Array,
+  stream: boolean
+): string | null {
+  try {
+    return decoder.decode(value, { stream })
+  } catch {
+    return null
+  }
+}
+
 /**
  * Creates a ReadableStream provides inline script tag chunks for writing hydration
  * data to the client outside the React render itself.
@@ -96,9 +116,6 @@ export function createInlinedDataReadableStream(
     ? `<script nonce=${JSON.stringify(nonce)}>`
     : '<script>'
 
-  const decoder = new TextDecoder('utf-8', { fatal: true })
-  const decoderOptions = { stream: true }
-
   const flightReader = flightStream.getReader()
 
   const readable = new ReadableStream({
@@ -114,15 +131,22 @@ export function createInlinedDataReadableStream(
     async pull(controller) {
       try {
         const { done, value } = await flightReader.read()
-        if (done) {
-          const tail = decoder.decode(value, { stream: false })
-          if (tail.length) {
-            writeFlightDataInstruction(controller, startScriptTag, tail)
+
+        if (value) {
+          const decoded = tryDecodeAsUtf8String(value, !done)
+
+          if (decoded === null) {
+            // The chunk cannot be decoded as valid UTF-8 string as it might
+            // have arbitrary binary data.
+            // Instead let's inline it in base64 and decode it in place.
+            writeFlightDataInstruction(controller, startScriptTag, value)
+          } else if (decoded.length) {
+            writeFlightDataInstruction(controller, startScriptTag, decoded)
           }
+        }
+
+        if (done) {
           controller.close()
-        } else {
-          const chunkAsString = decoder.decode(value, decoderOptions)
-          writeFlightDataInstruction(controller, startScriptTag, chunkAsString)
         }
       } catch (error) {
         // There was a problem in the upstream reader or during decoding or enqueuing
@@ -154,13 +178,22 @@ function writeInitialInstructions(
 function writeFlightDataInstruction(
   controller: ReadableStreamDefaultController,
   scriptStart: string,
-  chunkAsString: string
+  chunk: string | Uint8Array
 ) {
+  let htmlInlinedData: string
+
+  if (typeof chunk === 'string') {
+    htmlInlinedData = htmlEscapeJsonString(
+      JSON.stringify([INLINE_FLIGHT_PAYLOAD_DATA, chunk])
+    )
+  } else {
+    const base64 = btoa(String.fromCodePoint(...chunk))
+    htmlInlinedData = `[${INLINE_FLIGHT_PAYLOAD_BINARY},Uint8Array.from(atob("${base64}"),s=>s.codePointAt(0))]`
+  }
+
   controller.enqueue(
     encoder.encode(
-      `${scriptStart}self.__next_f.push(${htmlEscapeJsonString(
-        JSON.stringify([INLINE_FLIGHT_PAYLOAD_DATA, chunkAsString])
-      )})</script>`
+      `${scriptStart}self.__next_f.push(${htmlInlinedData})</script>`
     )
   )
 }
diff --git a/test/e2e/app-dir/actions/app/binary/action.js b/test/e2e/app-dir/actions/app/binary/action.js
new file mode 100644
index 0000000000000..a2e7d3c64e047
--- /dev/null
+++ b/test/e2e/app-dir/actions/app/binary/action.js
@@ -0,0 +1,7 @@
+'use server'
+
+export async function* gen() {
+  yield 'string'
+  yield new Uint8Array([104, 101, 108, 108, 111])
+  yield 'result'
+}
diff --git a/test/e2e/app-dir/actions/app/binary/client.js b/test/e2e/app-dir/actions/app/binary/client.js
new file mode 100644
index 0000000000000..a2bcce1a43d70
--- /dev/null
+++ b/test/e2e/app-dir/actions/app/binary/client.js
@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+import { gen } from './action'
+
+export function Client({ data, arbitrary, action }) {
+  const [payload, setPayload] = useState('')
+
+  return (
+    <>
+      <div>prop: {new TextDecoder().decode(data)}</div>
+      <div>arbitrary binary: {String(arbitrary)}</div>
+      <div>action payload: {payload}</div>
+      <button
+        onClick={async () => {
+          const r = await action()
+
+          const { stream } = (await r.next()).value
+
+          let result = ''
+
+          const reader = stream.getReader()
+          while (true) {
+            const { value, done } = await reader.read()
+            if (done) break
+            result += new TextDecoder().decode(value)
+            setPayload(result)
+          }
+        }}
+      >
+        send
+      </button>
+      <button
+        onClick={async () => {
+          for await (const value of await gen()) {
+            setPayload(String(value))
+          }
+        }}
+      >
+        gen
+      </button>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/actions/app/binary/page.js b/test/e2e/app-dir/actions/app/binary/page.js
new file mode 100644
index 0000000000000..3a1784238660e
--- /dev/null
+++ b/test/e2e/app-dir/actions/app/binary/page.js
@@ -0,0 +1,30 @@
+import { Client } from './client'
+
+export default function Page() {
+  const binaryData = new Uint8Array([104, 101, 108, 108, 111])
+  const nonUtf8BinaryData = new Uint8Array([0xff, 0, 1, 2, 3, 4])
+
+  return (
+    <Client
+      data={binaryData}
+      arbitrary={nonUtf8BinaryData}
+      action={async function* () {
+        'use server'
+
+        yield {
+          data: binaryData,
+          stream: new ReadableStream({
+            type: 'bytes',
+            async start(controller) {
+              controller.enqueue(new Uint8Array([104, 101]))
+              await new Promise((resolve) => setTimeout(resolve, 500))
+              controller.enqueue(new Uint8Array([108, 108, 111]))
+              await new Promise((resolve) => setTimeout(resolve, 500))
+              controller.close()
+            },
+          }),
+        }
+      }}
+    />
+  )
+}
diff --git a/test/e2e/app-dir/actions/next.config.js b/test/e2e/app-dir/actions/next.config.js
index 903009cede352..44a48b74cedd4 100644
--- a/test/e2e/app-dir/actions/next.config.js
+++ b/test/e2e/app-dir/actions/next.config.js
@@ -4,4 +4,7 @@ module.exports = {
   logging: {
     fetches: {},
   },
+  experimental: {
+    taint: true,
+  },
 }

From 596f012a1eb500dc6b9571c7719f469c2103b2ce Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 12 May 2024 09:58:50 -0700
Subject: [PATCH 2/6] improve inlining

---
 packages/next/src/client/app-index.tsx              | 13 ++++++++++---
 .../src/server/app-render/use-flight-response.tsx   |  9 +++++++--
 test/e2e/app-dir/actions/app/binary/action.js       |  7 -------
 test/e2e/app-dir/actions/app/binary/client.js       | 10 ----------
 test/e2e/app-dir/actions/app/binary/page.js         |  2 +-
 5 files changed, 18 insertions(+), 23 deletions(-)
 delete mode 100644 test/e2e/app-dir/actions/app/binary/action.js

diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
index 0fe072089535b..9058c233bf5d1 100644
--- a/packages/next/src/client/app-index.tsx
+++ b/packages/next/src/client/app-index.tsx
@@ -56,7 +56,7 @@ function nextServerDataCallback(
     | [isBootStrap: 0]
     | [isNotBootstrap: 1, responsePartial: string]
     | [isFormState: 2, formState: any]
-    | [isBinary: 3, responsePartial: Uint8Array]
+    | [isBinary: 3, responseBase64Partial: string]
 ): void {
   if (seg[0] === 0) {
     initialServerDataBuffer = []
@@ -75,10 +75,17 @@ function nextServerDataCallback(
     if (!initialServerDataBuffer)
       throw new Error('Unexpected server data: missing bootstrap script.')
 
+    // Decode the base64 string back to binary data.
+    const binaryString = atob(seg[1])
+    const decodedChunk = new Uint8Array(binaryString.length)
+    for (var i = 0; i < binaryString.length; i++) {
+      decodedChunk[i] = binaryString.charCodeAt(i)
+    }
+
     if (initialServerDataWriter) {
-      initialServerDataWriter.enqueue(seg[1])
+      initialServerDataWriter.enqueue(decodedChunk)
     } else {
-      initialServerDataBuffer.push(seg[1])
+      initialServerDataBuffer.push(decodedChunk)
     }
   }
 }
diff --git a/packages/next/src/server/app-render/use-flight-response.tsx b/packages/next/src/server/app-render/use-flight-response.tsx
index 82b87a74bcb01..1c4df91ffe0b8 100644
--- a/packages/next/src/server/app-render/use-flight-response.tsx
+++ b/packages/next/src/server/app-render/use-flight-response.tsx
@@ -138,7 +138,6 @@ export function createInlinedDataReadableStream(
           if (decoded === null) {
             // The chunk cannot be decoded as valid UTF-8 string as it might
             // have arbitrary binary data.
-            // Instead let's inline it in base64 and decode it in place.
             writeFlightDataInstruction(controller, startScriptTag, value)
           } else if (decoded.length) {
             writeFlightDataInstruction(controller, startScriptTag, decoded)
@@ -187,8 +186,14 @@ function writeFlightDataInstruction(
       JSON.stringify([INLINE_FLIGHT_PAYLOAD_DATA, chunk])
     )
   } else {
+    // The chunk cannot be embedded as a UTF-8 string in the script tag.
+    // Instead let's inline it in base64.
+    // Credits to Devon Govett (devongovett) for the technique.
+    // https://github.com/devongovett/rsc-html-stream
     const base64 = btoa(String.fromCodePoint(...chunk))
-    htmlInlinedData = `[${INLINE_FLIGHT_PAYLOAD_BINARY},Uint8Array.from(atob("${base64}"),s=>s.codePointAt(0))]`
+    htmlInlinedData = htmlEscapeJsonString(
+      JSON.stringify([INLINE_FLIGHT_PAYLOAD_BINARY, base64])
+    )
   }
 
   controller.enqueue(
diff --git a/test/e2e/app-dir/actions/app/binary/action.js b/test/e2e/app-dir/actions/app/binary/action.js
deleted file mode 100644
index a2e7d3c64e047..0000000000000
--- a/test/e2e/app-dir/actions/app/binary/action.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use server'
-
-export async function* gen() {
-  yield 'string'
-  yield new Uint8Array([104, 101, 108, 108, 111])
-  yield 'result'
-}
diff --git a/test/e2e/app-dir/actions/app/binary/client.js b/test/e2e/app-dir/actions/app/binary/client.js
index a2bcce1a43d70..472c0ce1cf0ea 100644
--- a/test/e2e/app-dir/actions/app/binary/client.js
+++ b/test/e2e/app-dir/actions/app/binary/client.js
@@ -1,7 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { gen } from './action'
 
 export function Client({ data, arbitrary, action }) {
   const [payload, setPayload] = useState('')
@@ -30,15 +29,6 @@ export function Client({ data, arbitrary, action }) {
       >
         send
       </button>
-      <button
-        onClick={async () => {
-          for await (const value of await gen()) {
-            setPayload(String(value))
-          }
-        }}
-      >
-        gen
-      </button>
     </>
   )
 }
diff --git a/test/e2e/app-dir/actions/app/binary/page.js b/test/e2e/app-dir/actions/app/binary/page.js
index 3a1784238660e..fb874914d360b 100644
--- a/test/e2e/app-dir/actions/app/binary/page.js
+++ b/test/e2e/app-dir/actions/app/binary/page.js
@@ -2,7 +2,7 @@ import { Client } from './client'
 
 export default function Page() {
   const binaryData = new Uint8Array([104, 101, 108, 108, 111])
-  const nonUtf8BinaryData = new Uint8Array([0xff, 0, 1, 2, 3, 4])
+  const nonUtf8BinaryData = new Uint8Array([0xff, 0, 1, 2, 3])
 
   return (
     <Client

From d0416ce2defa26c643149d3f2d3982d2a5337ecf Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 12 May 2024 12:04:42 -0700
Subject: [PATCH 3/6] add test

---
 test/e2e/app-dir/actions/app/binary/client.js | 34 -------------------
 test/e2e/app-dir/actions/app/binary/page.js   | 30 ----------------
 test/e2e/app-dir/actions/next.config.js       |  3 --
 test/e2e/app-dir/binary/app/client.js         | 19 +++++++++++
 test/e2e/app-dir/binary/app/layout.js         | 12 +++++++
 test/e2e/app-dir/binary/app/page.js           |  8 +++++
 test/e2e/app-dir/binary/next.config.js        |  6 ++++
 test/e2e/app-dir/binary/rsc-binary.test.ts    | 32 +++++++++++++++++
 8 files changed, 77 insertions(+), 67 deletions(-)
 delete mode 100644 test/e2e/app-dir/actions/app/binary/client.js
 delete mode 100644 test/e2e/app-dir/actions/app/binary/page.js
 create mode 100644 test/e2e/app-dir/binary/app/client.js
 create mode 100644 test/e2e/app-dir/binary/app/layout.js
 create mode 100644 test/e2e/app-dir/binary/app/page.js
 create mode 100644 test/e2e/app-dir/binary/next.config.js
 create mode 100644 test/e2e/app-dir/binary/rsc-binary.test.ts

diff --git a/test/e2e/app-dir/actions/app/binary/client.js b/test/e2e/app-dir/actions/app/binary/client.js
deleted file mode 100644
index 472c0ce1cf0ea..0000000000000
--- a/test/e2e/app-dir/actions/app/binary/client.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-export function Client({ data, arbitrary, action }) {
-  const [payload, setPayload] = useState('')
-
-  return (
-    <>
-      <div>prop: {new TextDecoder().decode(data)}</div>
-      <div>arbitrary binary: {String(arbitrary)}</div>
-      <div>action payload: {payload}</div>
-      <button
-        onClick={async () => {
-          const r = await action()
-
-          const { stream } = (await r.next()).value
-
-          let result = ''
-
-          const reader = stream.getReader()
-          while (true) {
-            const { value, done } = await reader.read()
-            if (done) break
-            result += new TextDecoder().decode(value)
-            setPayload(result)
-          }
-        }}
-      >
-        send
-      </button>
-    </>
-  )
-}
diff --git a/test/e2e/app-dir/actions/app/binary/page.js b/test/e2e/app-dir/actions/app/binary/page.js
deleted file mode 100644
index fb874914d360b..0000000000000
--- a/test/e2e/app-dir/actions/app/binary/page.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Client } from './client'
-
-export default function Page() {
-  const binaryData = new Uint8Array([104, 101, 108, 108, 111])
-  const nonUtf8BinaryData = new Uint8Array([0xff, 0, 1, 2, 3])
-
-  return (
-    <Client
-      data={binaryData}
-      arbitrary={nonUtf8BinaryData}
-      action={async function* () {
-        'use server'
-
-        yield {
-          data: binaryData,
-          stream: new ReadableStream({
-            type: 'bytes',
-            async start(controller) {
-              controller.enqueue(new Uint8Array([104, 101]))
-              await new Promise((resolve) => setTimeout(resolve, 500))
-              controller.enqueue(new Uint8Array([108, 108, 111]))
-              await new Promise((resolve) => setTimeout(resolve, 500))
-              controller.close()
-            },
-          }),
-        }
-      }}
-    />
-  )
-}
diff --git a/test/e2e/app-dir/actions/next.config.js b/test/e2e/app-dir/actions/next.config.js
index 44a48b74cedd4..903009cede352 100644
--- a/test/e2e/app-dir/actions/next.config.js
+++ b/test/e2e/app-dir/actions/next.config.js
@@ -4,7 +4,4 @@ module.exports = {
   logging: {
     fetches: {},
   },
-  experimental: {
-    taint: true,
-  },
 }
diff --git a/test/e2e/app-dir/binary/app/client.js b/test/e2e/app-dir/binary/app/client.js
new file mode 100644
index 0000000000000..37f29ac669dc4
--- /dev/null
+++ b/test/e2e/app-dir/binary/app/client.js
@@ -0,0 +1,19 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function Client({ binary, arbitrary }) {
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
+  return (
+    <>
+      <div>utf8 binary: {new TextDecoder().decode(binary)}</div>
+      <div>arbitrary binary: {String(arbitrary)}</div>
+      <div>hydrated: {String(hydrated)}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/binary/app/layout.js b/test/e2e/app-dir/binary/app/layout.js
new file mode 100644
index 0000000000000..8525f5f8c0b2a
--- /dev/null
+++ b/test/e2e/app-dir/binary/app/layout.js
@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/binary/app/page.js b/test/e2e/app-dir/binary/app/page.js
new file mode 100644
index 0000000000000..5bbd22eedea98
--- /dev/null
+++ b/test/e2e/app-dir/binary/app/page.js
@@ -0,0 +1,8 @@
+import { Client } from './client'
+
+export default function Page() {
+  const binaryData = new Uint8Array([104, 101, 108, 108, 111])
+  const nonUtf8BinaryData = new Uint8Array([0xff, 0, 1, 2, 3])
+
+  return <Client binary={binaryData} arbitrary={nonUtf8BinaryData} />
+}
diff --git a/test/e2e/app-dir/binary/next.config.js b/test/e2e/app-dir/binary/next.config.js
new file mode 100644
index 0000000000000..5b7ed7e24f002
--- /dev/null
+++ b/test/e2e/app-dir/binary/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experimental: {
+    // This ensures that we're running the experimental React.
+    taint: true,
+  },
+}
diff --git a/test/e2e/app-dir/binary/rsc-binary.test.ts b/test/e2e/app-dir/binary/rsc-binary.test.ts
new file mode 100644
index 0000000000000..4f29a0a3d5942
--- /dev/null
+++ b/test/e2e/app-dir/binary/rsc-binary.test.ts
@@ -0,0 +1,32 @@
+import { nextTestSetup } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+describe('RSC binary serialization', () => {
+  const { next, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+    dependencies: {
+      react: '19.0.0-beta-4508873393-20240430',
+      'react-dom': '19.0.0-beta-4508873393-20240430',
+      'server-only': 'latest',
+    },
+  })
+  if (skipped) return
+
+  afterEach(async () => {
+    await next.stop()
+  })
+
+  it('should correctly encode/decode binaries and hydrate', async function () {
+    const browser = await next.browser('/')
+    await check(async () => {
+      const content = await browser.elementByCss('body').text()
+
+      return content.includes('utf8 binary: hello') &&
+        content.includes('arbitrary binary: 255,0,1,2,3') &&
+        content.includes('hydrated: true')
+        ? 'success'
+        : 'fail'
+    }, 'success')
+  })
+})

From 15160d0a8c01a17b7c76ea6d332cf11af5f50dae Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 13 May 2024 01:06:11 -0700
Subject: [PATCH 4/6] fix inlining decoding function

---
 .../server/app-render/use-flight-response.tsx | 33 ++++++-------------
 .../stream-utils/node-web-streams-helper.ts   |  7 +++-
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/next/src/server/app-render/use-flight-response.tsx b/packages/next/src/server/app-render/use-flight-response.tsx
index 1c4df91ffe0b8..86831a58bd550 100644
--- a/packages/next/src/server/app-render/use-flight-response.tsx
+++ b/packages/next/src/server/app-render/use-flight-response.tsx
@@ -79,25 +79,6 @@ export async function flightRenderComplete(
   }
 }
 
-const decoder = new TextDecoder('utf-8', { fatal: true })
-
-/**
- * This function will attempt to decode a Uint8Array as a UTF-8 string. If the
- * data is not valid UTF-8 it will return null.
- *
- * @param value A Uint8Array that can contain arbitrary data.
- */
-function tryDecodeAsUtf8String(
-  value: Uint8Array,
-  stream: boolean
-): string | null {
-  try {
-    return decoder.decode(value, { stream })
-  } catch {
-    return null
-  }
-}
-
 /**
  * Creates a ReadableStream provides inline script tag chunks for writing hydration
  * data to the client outside the React render itself.
@@ -117,6 +98,7 @@ export function createInlinedDataReadableStream(
     : '<script>'
 
   const flightReader = flightStream.getReader()
+  const decoder = new TextDecoder('utf-8', { fatal: true })
 
   const readable = new ReadableStream({
     type: 'bytes',
@@ -133,14 +115,19 @@ export function createInlinedDataReadableStream(
         const { done, value } = await flightReader.read()
 
         if (value) {
-          const decoded = tryDecodeAsUtf8String(value, !done)
+          try {
+            const decodedString = decoder.decode(value, { stream: !done })
 
-          if (decoded === null) {
             // The chunk cannot be decoded as valid UTF-8 string as it might
             // have arbitrary binary data.
+            writeFlightDataInstruction(
+              controller,
+              startScriptTag,
+              decodedString
+            )
+          } catch {
+            // The chunk cannot be decoded as valid UTF-8 string.
             writeFlightDataInstruction(controller, startScriptTag, value)
-          } else if (decoded.length) {
-            writeFlightDataInstruction(controller, startScriptTag, decoded)
           }
         }
 
diff --git a/packages/next/src/server/stream-utils/node-web-streams-helper.ts b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
index a3d4ae8b924ee..49b4d9eab774c 100644
--- a/packages/next/src/server/stream-utils/node-web-streams-helper.ts
+++ b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
@@ -81,7 +81,12 @@ export async function streamToString(
 
   // @ts-expect-error TypeScript gets this wrong (https://nodejs.org/api/webstreams.html#async-iteration)
   for await (const chunk of stream) {
-    string += decoder.decode(chunk, { stream: true })
+    try {
+      string += decoder.decode(chunk, { stream: true })
+    } catch (e) {
+      console.error('!!!!Error decoding chunk', e)
+      throw e
+    }
   }
 
   string += decoder.decode()

From 3bf397649f63c53f38cf71180f3ec27c435400f8 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Tue, 14 May 2024 18:51:49 -0700
Subject: [PATCH 5/6] revert leftover edit

---
 .../src/server/stream-utils/node-web-streams-helper.ts     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/next/src/server/stream-utils/node-web-streams-helper.ts b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
index 49b4d9eab774c..a3d4ae8b924ee 100644
--- a/packages/next/src/server/stream-utils/node-web-streams-helper.ts
+++ b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
@@ -81,12 +81,7 @@ export async function streamToString(
 
   // @ts-expect-error TypeScript gets this wrong (https://nodejs.org/api/webstreams.html#async-iteration)
   for await (const chunk of stream) {
-    try {
-      string += decoder.decode(chunk, { stream: true })
-    } catch (e) {
-      console.error('!!!!Error decoding chunk', e)
-      throw e
-    }
+    string += decoder.decode(chunk, { stream: true })
   }
 
   string += decoder.decode()

From 6c519d4b457bf1fbeeccb3ed0d01adbd40952e65 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 15 May 2024 14:58:43 -0700
Subject: [PATCH 6/6] Separate app router cache entries from pages and use
 buffer (#65808)

Continues https://github.com/vercel/next.js/pull/65664/files and fixes
use stringifying the RSC payload un-necessarily which is causing
encoding issues.
---
 .../next/src/server/app-render/app-render.tsx |  2 +-
 packages/next/src/server/base-server.ts       | 73 +++++++++++++----
 .../lib/incremental-cache/fetch-cache.ts      |  5 +-
 .../incremental-cache/file-system-cache.ts    | 80 +++++++++++--------
 packages/next/src/server/render-result.ts     | 33 +++++++-
 .../next/src/server/response-cache/types.ts   | 30 ++++++-
 .../next/src/server/response-cache/utils.ts   | 24 +++++-
 .../stream-utils/node-web-streams-helper.ts   | 22 +++++
 8 files changed, 209 insertions(+), 60 deletions(-)

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 18f7d5c9f028e..2ef12e60e16ba 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -395,7 +395,7 @@ function createFlightDataResolver(ctx: AppRenderContext) {
   // Generate the flight data and as soon as it can, convert it into a string.
   const promise = generateFlight(ctx)
     .then(async (result) => ({
-      flightData: await result.toUnchunkedString(true),
+      flightData: await result.toUnchunkedBuffer(true),
     }))
     // Otherwise if it errored, return the error.
     .catch((err) => ({ err }))
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index b13f9f27f061c..521fc48ffd817 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -13,6 +13,8 @@ import type { ParsedUrlQuery } from 'querystring'
 import type { RenderOptsPartial as PagesRenderOptsPartial } from './render'
 import type { RenderOptsPartial as AppRenderOptsPartial } from './app-render/types'
 import type {
+  CachedAppPageValue,
+  CachedPageValue,
   ResponseCacheBase,
   ResponseCacheEntry,
   ResponseGenerator,
@@ -2528,16 +2530,29 @@ export default abstract class Server<
         return null
       }
 
+      if (isAppPath) {
+        return {
+          value: {
+            kind: 'APP_PAGE',
+            html: result,
+            headers,
+            rscData: metadata.flightData,
+            postponed: metadata.postponed,
+            status: res.statusCode,
+          } satisfies CachedAppPageValue,
+          revalidate: metadata.revalidate,
+        }
+      }
+
       // We now have a valid HTML result that we can return to the user.
       return {
         value: {
           kind: 'PAGE',
           html: result,
-          pageData: metadata.pageData ?? metadata.flightData,
-          postponed: metadata.postponed,
+          pageData: metadata.pageData,
           headers,
-          status: isAppPath ? res.statusCode : undefined,
-        },
+          status: res.statusCode,
+        } satisfies CachedPageValue,
         revalidate: metadata.revalidate,
       }
     }
@@ -2650,7 +2665,6 @@ export default abstract class Server<
               value: {
                 kind: 'PAGE',
                 html: RenderResult.fromStatic(html),
-                postponed: undefined,
                 status: undefined,
                 headers: undefined,
                 pageData: {},
@@ -2719,7 +2733,7 @@ export default abstract class Server<
     }
 
     const didPostpone =
-      cacheEntry.value?.kind === 'PAGE' &&
+      cacheEntry.value?.kind === 'APP_PAGE' &&
       typeof cacheEntry.value.postponed === 'string'
 
     if (
@@ -2886,7 +2900,11 @@ export default abstract class Server<
     } else if (isAppPath) {
       // If the request has a postponed state and it's a resume request we
       // should error.
-      if (cachedData.postponed && minimalPostponed) {
+      if (
+        cachedData.kind === 'APP_PAGE' &&
+        cachedData.postponed &&
+        minimalPostponed
+      ) {
         throw new Error(
           'Invariant: postponed state should not be present on a resume request'
         )
@@ -2934,7 +2952,11 @@ export default abstract class Server<
       }
 
       // Mark that the request did postpone if this is a data request.
-      if (cachedData.postponed && isRSCRequest) {
+      if (
+        cachedData.kind === 'APP_PAGE' &&
+        cachedData.postponed &&
+        isRSCRequest
+      ) {
         res.setHeader(NEXT_DID_POSTPONE_HEADER, '1')
       }
 
@@ -2945,8 +2967,15 @@ export default abstract class Server<
       if (isDataReq && !isPreviewMode) {
         // If this is a dynamic RSC request, then stream the response.
         if (isDynamicRSCRequest) {
-          if (cachedData.pageData) {
-            throw new Error('Invariant: Expected pageData to be undefined')
+          if (cachedData.kind !== 'APP_PAGE') {
+            console.error({ url: req.url, pathname }, cachedData)
+            throw new Error(
+              `Invariant: expected cache data kind of APP_PAGE got ${cachedData.kind}`
+            )
+          }
+
+          if (cachedData.rscData) {
+            throw new Error('Invariant: Expected rscData to be undefined')
           }
 
           if (cachedData.postponed) {
@@ -2965,9 +2994,15 @@ export default abstract class Server<
           }
         }
 
-        if (typeof cachedData.pageData !== 'string') {
+        if (cachedData.kind !== 'APP_PAGE') {
+          throw new Error(
+            `Invariant: expected cached data to be APP_PAGE got ${cachedData.kind}`
+          )
+        }
+
+        if (!Buffer.isBuffer(cachedData.rscData)) {
           throw new Error(
-            `Invariant: expected pageData to be a string, got ${typeof cachedData.pageData}`
+            `Invariant: expected rscData to be a Buffer, got ${typeof cachedData.rscData}`
           )
         }
 
@@ -2975,7 +3010,7 @@ export default abstract class Server<
         // data.
         return {
           type: 'rsc',
-          body: RenderResult.fromStatic(cachedData.pageData),
+          body: RenderResult.fromStatic(cachedData.rscData),
           revalidate: cacheEntry.revalidate,
         }
       }
@@ -2986,7 +3021,10 @@ export default abstract class Server<
       // If there's no postponed state, we should just serve the HTML. This
       // should also be the case for a resume request because it's completed
       // as a server render (rather than a static render).
-      if (!cachedData.postponed || this.minimalMode) {
+      if (
+        !(cachedData.kind === 'APP_PAGE' && cachedData.postponed) ||
+        this.minimalMode
+      ) {
         return {
           type: 'html',
           body,
@@ -3015,7 +3053,7 @@ export default abstract class Server<
             throw new Error('Invariant: expected a result to be returned')
           }
 
-          if (result.value?.kind !== 'PAGE') {
+          if (result.value?.kind !== 'APP_PAGE') {
             throw new Error(
               `Invariant: expected a page response, got ${result.value?.kind}`
             )
@@ -3041,6 +3079,11 @@ export default abstract class Server<
         revalidate: 0,
       }
     } else if (isDataReq) {
+      if (cachedData.kind !== 'PAGE') {
+        throw new Error(
+          `Invariant: expected cached data to be PAGE got ${cachedData.kind}`
+        )
+      }
       return {
         type: 'json',
         body: RenderResult.fromStatic(JSON.stringify(cachedData.pageData)),
diff --git a/packages/next/src/server/lib/incremental-cache/fetch-cache.ts b/packages/next/src/server/lib/incremental-cache/fetch-cache.ts
index 6ecb7048eda90..55d77c0f228fc 100644
--- a/packages/next/src/server/lib/incremental-cache/fetch-cache.ts
+++ b/packages/next/src/server/lib/incremental-cache/fetch-cache.ts
@@ -109,7 +109,10 @@ export default class FetchCache implements CacheHandler {
             }
             // rough estimate of size of cache value
             return (
-              value.html.length + (JSON.stringify(value.pageData)?.length || 0)
+              value.html.length +
+              (JSON.stringify(
+                value.kind === 'APP_PAGE' ? value.rscData : value.pageData
+              )?.length || 0)
             )
           },
         })
diff --git a/packages/next/src/server/lib/incremental-cache/file-system-cache.ts b/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
index cca5da3030263..32119dd6085e8 100644
--- a/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
+++ b/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
@@ -77,7 +77,10 @@ export default class FileSystemCache implements CacheHandler {
             }
             // rough estimate of size of cache value
             return (
-              value.html.length + (JSON.stringify(value.pageData)?.length || 0)
+              value.html.length +
+              (JSON.stringify(
+                value.kind === 'APP_PAGE' ? value.rscData : value.pageData
+              )?.length || 0)
             )
           },
         })
@@ -229,23 +232,6 @@ export default class FileSystemCache implements CacheHandler {
             }
           }
         } else {
-          const pageData = isAppPath
-            ? await this.fs.readFile(
-                this.getFilePath(
-                  `${key}${
-                    this.isAppPPREnabled ? RSC_PREFETCH_SUFFIX : RSC_SUFFIX
-                  }`,
-                  'app'
-                ),
-                'utf8'
-              )
-            : JSON.parse(
-                await this.fs.readFile(
-                  this.getFilePath(`${key}${NEXT_DATA_SUFFIX}`, 'pages'),
-                  'utf8'
-                )
-              )
-
           let meta: RouteMetadata | undefined
 
           if (isAppPath) {
@@ -259,16 +245,44 @@ export default class FileSystemCache implements CacheHandler {
             } catch {}
           }
 
-          data = {
-            lastModified: mtime.getTime(),
-            value: {
-              kind: 'PAGE',
-              html: fileData,
-              pageData,
-              postponed: meta?.postponed,
-              headers: meta?.headers,
-              status: meta?.status,
-            },
+          if (isAppPath) {
+            const rscData = await this.fs.readFile(
+              this.getFilePath(
+                `${key}${
+                  this.isAppPPREnabled ? RSC_PREFETCH_SUFFIX : RSC_SUFFIX
+                }`,
+                'app'
+              )
+            )
+            data = {
+              lastModified: mtime.getTime(),
+              value: {
+                kind: 'APP_PAGE',
+                html: fileData,
+                rscData,
+                postponed: meta?.postponed,
+                headers: meta?.headers,
+                status: meta?.status,
+              },
+            }
+          } else {
+            const pageData = JSON.parse(
+              await this.fs.readFile(
+                this.getFilePath(`${key}${NEXT_DATA_SUFFIX}`, 'pages'),
+                'utf8'
+              )
+            )
+
+            data = {
+              lastModified: mtime.getTime(),
+              value: {
+                kind: 'PAGE',
+                html: fileData,
+                pageData,
+                headers: meta?.headers,
+                status: meta?.status,
+              },
+            }
           }
         }
 
@@ -280,7 +294,7 @@ export default class FileSystemCache implements CacheHandler {
       }
     }
 
-    if (data?.value?.kind === 'PAGE') {
+    if (data?.value?.kind === 'APP_PAGE' || data?.value?.kind === 'PAGE') {
       let cacheTags: undefined | string[]
       const tagsHeader = data.value.headers?.[NEXT_CACHE_TAGS_HEADER]
 
@@ -364,8 +378,8 @@ export default class FileSystemCache implements CacheHandler {
       return
     }
 
-    if (data?.kind === 'PAGE') {
-      const isAppPath = typeof data.pageData === 'string'
+    if (data?.kind === 'PAGE' || data?.kind === 'APP_PAGE') {
+      const isAppPath = 'rscData' in data
       const htmlPath = this.getFilePath(
         `${key}.html`,
         isAppPath ? 'app' : 'pages'
@@ -384,14 +398,14 @@ export default class FileSystemCache implements CacheHandler {
           }`,
           isAppPath ? 'app' : 'pages'
         ),
-        isAppPath ? data.pageData : JSON.stringify(data.pageData)
+        isAppPath ? data.rscData : JSON.stringify(data.pageData)
       )
 
       if (data.headers || data.status) {
         const meta: RouteMetadata = {
           headers: data.headers,
           status: data.status,
-          postponed: data.postponed,
+          postponed: isAppPath ? data.postponed : undefined,
         }
 
         await this.fs.writeFile(
diff --git a/packages/next/src/server/render-result.ts b/packages/next/src/server/render-result.ts
index 57bd89695dbfb..448a0431795e6 100644
--- a/packages/next/src/server/render-result.ts
+++ b/packages/next/src/server/render-result.ts
@@ -4,7 +4,9 @@ import type { FetchMetrics } from './base-http'
 
 import {
   chainStreams,
+  streamFromBuffer,
   streamFromString,
+  streamToBuffer,
   streamToString,
 } from './stream-utils/node-web-streams-helper'
 import { isAbortError, pipeToNodeResponse } from './pipe-readable'
@@ -12,7 +14,7 @@ import { isAbortError, pipeToNodeResponse } from './pipe-readable'
 type ContentTypeOption = string | undefined
 
 export type AppPageRenderResultMetadata = {
-  flightData?: string
+  flightData?: Buffer
   revalidate?: Revalidate
   staticBailoutInfo?: {
     stack?: string
@@ -50,6 +52,7 @@ export type RenderResultResponse =
   | ReadableStream<Uint8Array>[]
   | ReadableStream<Uint8Array>
   | string
+  | Buffer
   | null
 
 export type RenderResultOptions<
@@ -89,7 +92,7 @@ export default class RenderResult<
    * @param value the static response value
    * @returns a new RenderResult instance
    */
-  public static fromStatic(value: string) {
+  public static fromStatic(value: string | Buffer) {
     return new RenderResult<StaticRenderResultMetadata>(value, { metadata: {} })
   }
 
@@ -125,6 +128,26 @@ export default class RenderResult<
     return typeof this.response !== 'string'
   }
 
+  public toUnchunkedBuffer(stream?: false): Buffer
+  public toUnchunkedBuffer(stream: true): Promise<Buffer>
+  public toUnchunkedBuffer(stream = false): Promise<Buffer> | Buffer {
+    if (this.response === null) {
+      throw new Error('Invariant: null responses cannot be unchunked')
+    }
+
+    if (typeof this.response !== 'string') {
+      if (!stream) {
+        throw new Error(
+          'Invariant: dynamic responses cannot be unchunked. This is a bug in Next.js'
+        )
+      }
+
+      return streamToBuffer(this.readable)
+    }
+
+    return Buffer.from(this.response)
+  }
+
   /**
    * Returns the response if it is a string. If the page was dynamic, this will
    * return a promise if the `stream` option is true, or it will throw an error.
@@ -164,6 +187,10 @@ export default class RenderResult<
       throw new Error('Invariant: static responses cannot be streamed')
     }
 
+    if (Buffer.isBuffer(this.response)) {
+      return streamFromBuffer(this.response)
+    }
+
     // If the response is an array of streams, then chain them together.
     if (Array.isArray(this.response)) {
       return chainStreams(...this.response)
@@ -191,6 +218,8 @@ export default class RenderResult<
       responses = [streamFromString(this.response)]
     } else if (Array.isArray(this.response)) {
       responses = this.response
+    } else if (Buffer.isBuffer(this.response)) {
+      responses = [streamFromBuffer(this.response)]
     } else {
       responses = [this.response]
     }
diff --git a/packages/next/src/server/response-cache/types.ts b/packages/next/src/server/response-cache/types.ts
index 4f098edf9932c..e8492bb3f4a0e 100644
--- a/packages/next/src/server/response-cache/types.ts
+++ b/packages/next/src/server/response-cache/types.ts
@@ -40,12 +40,22 @@ export interface CachedRedirectValue {
   props: Object
 }
 
-interface CachedPageValue {
-  kind: 'PAGE'
+export interface CachedAppPageValue {
+  kind: 'APP_PAGE'
   // this needs to be a RenderResult so since renderResponse
   // expects that type instead of a string
   html: RenderResult
+  rscData: Buffer | undefined
+  status: number | undefined
   postponed: string | undefined
+  headers: OutgoingHttpHeaders | undefined
+}
+
+export interface CachedPageValue {
+  kind: 'PAGE'
+  // this needs to be a RenderResult so since renderResponse
+  // expects that type instead of a string
+  html: RenderResult
   pageData: Object
   status: number | undefined
   headers: OutgoingHttpHeaders | undefined
@@ -69,13 +79,23 @@ export interface CachedImageValue {
   isStale?: boolean
 }
 
-interface IncrementalCachedPageValue {
+export interface IncrementalCachedAppPageValue {
+  kind: 'APP_PAGE'
+  // this needs to be a string since the cache expects to store
+  // the string value
+  html: string
+  rscData: Buffer | undefined
+  headers: OutgoingHttpHeaders | undefined
+  postponed: string | undefined
+  status: number | undefined
+}
+
+export interface IncrementalCachedPageValue {
   kind: 'PAGE'
   // this needs to be a string since the cache expects to store
   // the string value
   html: string
   pageData: Object
-  postponed: string | undefined
   headers: OutgoingHttpHeaders | undefined
   status: number | undefined
 }
@@ -92,6 +112,7 @@ export type IncrementalCacheEntry = {
 export type IncrementalCacheValue =
   | CachedRedirectValue
   | IncrementalCachedPageValue
+  | IncrementalCachedAppPageValue
   | CachedImageValue
   | CachedFetchValue
   | CachedRouteValue
@@ -99,6 +120,7 @@ export type IncrementalCacheValue =
 export type ResponseCacheValue =
   | CachedRedirectValue
   | CachedPageValue
+  | CachedAppPageValue
   | CachedImageValue
   | CachedRouteValue
 
diff --git a/packages/next/src/server/response-cache/utils.ts b/packages/next/src/server/response-cache/utils.ts
index 174d6fa619a4a..18ec64c1dd052 100644
--- a/packages/next/src/server/response-cache/utils.ts
+++ b/packages/next/src/server/response-cache/utils.ts
@@ -12,12 +12,20 @@ export async function fromResponseCacheEntry(
         ? {
             kind: 'PAGE',
             html: await cacheEntry.value.html.toUnchunkedString(true),
-            postponed: cacheEntry.value.postponed,
             pageData: cacheEntry.value.pageData,
             headers: cacheEntry.value.headers,
             status: cacheEntry.value.status,
           }
-        : cacheEntry.value,
+        : cacheEntry.value?.kind === 'APP_PAGE'
+          ? {
+              kind: 'APP_PAGE',
+              html: await cacheEntry.value.html.toUnchunkedString(true),
+              postponed: cacheEntry.value.postponed,
+              rscData: cacheEntry.value.rscData,
+              headers: cacheEntry.value.headers,
+              status: cacheEntry.value.status,
+            }
+          : cacheEntry.value,
   }
 }
 
@@ -42,10 +50,18 @@ export async function toResponseCacheEntry(
             kind: 'PAGE',
             html: RenderResult.fromStatic(response.value.html),
             pageData: response.value.pageData,
-            postponed: response.value.postponed,
             headers: response.value.headers,
             status: response.value.status,
           }
-        : response.value,
+        : response.value?.kind === 'APP_PAGE'
+          ? {
+              kind: 'APP_PAGE',
+              html: RenderResult.fromStatic(response.value.html),
+              rscData: response.value.rscData,
+              headers: response.value.headers,
+              status: response.value.status,
+              postponed: response.value.postponed,
+            }
+          : response.value,
   }
 }
diff --git a/packages/next/src/server/stream-utils/node-web-streams-helper.ts b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
index a3d4ae8b924ee..8b051257c5868 100644
--- a/packages/next/src/server/stream-utils/node-web-streams-helper.ts
+++ b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
@@ -73,6 +73,28 @@ export function streamFromString(str: string): ReadableStream<Uint8Array> {
   })
 }
 
+export function streamFromBuffer(chunk: Buffer): ReadableStream<Uint8Array> {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(chunk)
+      controller.close()
+    },
+  })
+}
+
+export async function streamToBuffer(
+  stream: ReadableStream<Uint8Array>
+): Promise<Buffer> {
+  const buffers: Buffer[] = []
+
+  // @ts-expect-error TypeScript gets this wrong (https://nodejs.org/api/webstreams.html#async-iteration)
+  for await (const chunk of stream) {
+    buffers.push(chunk)
+  }
+
+  return Buffer.concat(buffers)
+}
+
 export async function streamToString(
   stream: ReadableStream<Uint8Array>
 ): Promise<string> {