Fixes for inline embedding data in the web runtime

packages/next/server/render.tsx

@@ -62,6 +62,7 @@ import {
 import { DomainLocale } from './config'
 import RenderResult, { NodeWritablePiper } from './render-result'
 import isError from '../lib/is-error'
+import { readableStreamTee } from './web/utils'
 
 let Writable: typeof import('stream').Writable
 let Buffer: typeof import('buffer').Buffer
@@ -293,37 +294,28 @@ function createRSCHook() {
   ) => {
     let entry = rscCache.get(id)
     if (!entry) {
-      const [renderStream, forwardStream] = req.tee()
+      const [renderStream, forwardStream] = readableStreamTee(req)
       entry = createFromReadableStream(renderStream)
       rscCache.set(id, entry)
 
       const transfomer = new TransformStream({
         start(controller) {
           if (bootstrap) {
             controller.enqueue(
-              ReactDOMServer.renderToString(
-                <script
-                  dangerouslySetInnerHTML={{
-                    __html: `(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
-                      [0, id]
-                    )})`,
-                  }}
-                />
-              )
+              `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
+                0,
+                id,
+              ])})</script>`
             )
           }
         },
         transform(chunk, controller) {
           controller.enqueue(
-            ReactDOMServer.renderToString(
-              <script
-                dangerouslySetInnerHTML={{
-                  __html: `(self.__next_s=self.__next_s||[]).push(${JSON.stringify(
-                    [1, id, decoder.decode(chunk)]
-                  )})`,
-                }}
-              />
-            )
+            `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
+              1,
+              id,
+              decoder.decode(chunk),
+            ])})</script>`
           )
         },
       })

packages/next/server/web/utils.ts

@@ -14,6 +14,32 @@ export async function* streamToIterator<T>(
   reader.releaseLock()
 }
 
+export function readableStreamTee<T = any>(
+  readable: ReadableStream<T>
+): [ReadableStream<T>, ReadableStream<T>] {
+  const transformStream = new TransformStream()
+  const transformStream2 = new TransformStream()
+  const writer = transformStream.writable.getWriter()
+  const writer2 = transformStream2.writable.getWriter()
+
+  const reader = readable.getReader()
+  function read() {
+    reader.read().then(({ done, value }) => {
+      if (done) {
+        writer.close()
+        writer2.close()
+        return
+      }
+      writer.write(value)
+      writer2.write(value)
+      read()
+    })
+  }
+  read()
+
+  return [transformStream.readable, transformStream2.readable]
+}
+
 export function notImplemented(name: string, method: string): any {
   throw new Error(
     `Failed to get the '${method}' property on '${name}': the property is not implemented`