Fix data encoder and decoder to use stream in renderer (vercel#35936)

There are several places where the decoder should have `stream: true`. Also changed the `encodeText(extraChunk + decodeText(chunk))` pattern to just emit two chunks.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

packages/next/client/index.tsx

@@ -778,7 +778,7 @@ if (process.env.__NEXT_RSC) {
       if (serialized) {
         const readable = new ReadableStream({
           start(controller) {
-            controller.enqueue(new TextEncoder().encode(serialized))
+            controller.enqueue(encoder.encode(serialized))
             controller.close()
           },
         })

packages/next/server/node-web-streams-helper.ts

@@ -94,6 +94,8 @@ export async function streamToString(
   stream: ReadableStream<Uint8Array>
 ): Promise<string> {
   const reader = stream.getReader()
+  const textDecoder = new TextDecoder()
+
   let bufferedString = ''
 
   while (true) {
@@ -103,7 +105,7 @@ export async function streamToString(
       return bufferedString
     }
 
-    bufferedString += decodeText(value)
+    bufferedString += decodeText(value, textDecoder)
   }
 }
 
@@ -230,9 +232,10 @@ export function createFlushEffectStream(
 ): TransformStream<Uint8Array, Uint8Array> {
   return createTransformStream({
     async transform(chunk, controller) {
-      const extraChunk = await handleFlushEffect()
-      // those should flush together at once
-      controller.enqueue(encodeText(extraChunk + decodeText(chunk)))
+      const flushedChunk = encodeText(await handleFlushEffect())
+
+      controller.enqueue(flushedChunk)
+      controller.enqueue(chunk)
     },
   })
 }

packages/next/server/render.tsx

@@ -1461,15 +1461,19 @@ export async function renderToHTML(
             // If it's a server component with the Node.js runtime, we also
             // statically generate the page data.
             let data = ''
+
             const readable = serverComponentsPageDataTransformStream.readable
             const reader = readable.getReader()
+            const textDecoder = new TextDecoder()
+
             while (true) {
               const { done, value } = await reader.read()
               if (done) {
                 break
               }
-              data += decodeText(value)
+              data += decodeText(value, textDecoder)
             }
+
             ;(renderOpts as any).pageData = {
               ...(renderOpts as any).pageData,
               __flight__: data,