Use renderToPipeableStream when available

packages/next/server/render.tsx

@@ -1266,8 +1266,9 @@ export async function renderToHTML(
         // for non-concurrent rendering we need to ensure App is rendered
         // before _document so that updateHead is called/collected before
         // rendering _document's head
-        const result = ReactDOMServer.renderToString(content)
-        bodyResult = (suffix: string) => piperFromArray([result, suffix])
+        const result = await renderToStaticNodeStream(content)
+        const html = await piperToString(result)
+        bodyResult = (suffix: string) => piperFromArray([html, suffix])
       }
 
       return {
@@ -1536,22 +1537,38 @@ function serializeError(
   }
 }
 
+function renderToStaticNodeStream(
+  element: React.ReactElement
+): Promise<NodeWritablePiper> {
+  if (typeof (ReactDOMServer as any).renderToPipeableStream === 'function') {
+    return renderToNodeStream(element, null, true)
+  } else {
+    const result = ReactDOMServer.renderToString(element)
+    return Promise.resolve(piperFromArray([result]))
+  }
+}
+
 function renderToNodeStream(
   element: React.ReactElement,
-  suffix: string,
+  suffix: string | null,
   generateStaticHTML: boolean
 ): Promise<NodeWritablePiper> {
+  const closeTag = '</body></html>'
+
   return new Promise((resolve, reject) => {
     let underlyingStream: WritableType | null = null
     let queuedCallbacks: Array<(error?: Error | null) => void> = []
-    let shellFlushed = false
 
-    const closeTag = '</body></html>'
-    const [suffixUnclosed] = suffix.split(closeTag)
+    const suffixState = suffix
+      ? {
+          shellFlushed: false,
+          suffixFlushed: false,
+          suffixUnclosed: suffix.split(closeTag)[0],
+        }
+      : null
 
     // Based on the suggestion here:
     // https://github.com/reactwg/react-18/discussions/110
-    let suffixFlushed = false
     class NextWritable extends Writable {
       _write(
         chunk: any,
@@ -1571,15 +1588,15 @@ function renderToNodeStream(
           callback()
         }
 
-        if (!shellFlushed) {
-          shellFlushed = true
+        if (suffixState && !suffixState.shellFlushed) {
+          suffixState.shellFlushed = true
           // In the first round of streaming, all chunks will be finished in the micro task.
           // We use setTimeout to guarantee the suffix is flushed after the micro task.
           setTimeout(() => {
             // Flush the suffix if stream is not closed.
             if (underlyingStream) {
-              suffixFlushed = true
-              underlyingStream.write(suffixUnclosed)
+              suffixState.suffixFlushed = true
+              underlyingStream.write(suffixState.suffixUnclosed)
             }
           })
         }
@@ -1612,13 +1629,15 @@ function renderToNodeStream(
         resolved = true
         resolve((res, next) => {
           const doNext = (err?: Error) => {
-            // Some cases when the stream is closed too fast before setTimeout,
-            // have to ensure suffix is flushed anyway.
-            if (!suffixFlushed) {
-              res.write(suffixUnclosed)
-            }
-            if (!err) {
-              res.write(closeTag)
+            if (suffixState) {
+              // Some cases when the stream is closed too fast before setTimeout,
+              // have to ensure suffix is flushed anyway.
+              if (!suffixState.suffixFlushed) {
+                res.write(suffixState.suffixUnclosed)
+              }
+              if (!err) {
+                res.write(closeTag)
+              }
             }
             underlyingStream = null
             queuedCallbacks = []
@@ -1645,7 +1664,9 @@ function renderToNodeStream(
           abort()
         },
         onCompleteShell() {
-          shellFlushed = true
+          if (suffixState) {
+            suffixState.shellFlushed = true
+          }
           if (!generateStaticHTML) {
             doResolve(() => pipe(stream))
           }
@@ -1706,15 +1727,18 @@ function renderToWebStream(
 
     const closeTag = '</body></html>'
     const [suffixUnclosed] = suffix.split(closeTag)
+    const abortController = new AbortController()
 
     const stream: ReadableStream = (
       ReactDOMServer as any
     ).renderToReadableStream(element, {
-      onError(err: Error) {
+      signal: abortController.signal,
+      onError(error: Error) {
         if (!resolved) {
           resolved = true
-          reject(err)
+          reject(error)
         }
+        abortController.abort()
       },
       onCompleteShell() {
         if (!resolved) {