From c34bdb10122fa04e6202d9e7f7b641047e4d6d93 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 8 Apr 2022 16:22:25 +0200
Subject: [PATCH] Use renderToString for flush effects (#35999)

Use render to string call to render flush effects instead of rendering with stream plus converting to string
---
 .../next/server/node-web-streams-helper.ts    | 10 ++++----
 packages/next/server/render.tsx               | 23 ++++++++-----------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
index 9ef5e747d6813de..9512d9cbffa658c 100644
--- a/packages/next/server/node-web-streams-helper.ts
+++ b/packages/next/server/node-web-streams-helper.ts
@@ -118,11 +118,11 @@ export function createBufferedTransformStream(): TransformStream<
 }
 
 export function createFlushEffectStream(
-  handleFlushEffect: () => Promise<string>
+  handleFlushEffect: () => string
 ): TransformStream<Uint8Array, Uint8Array> {
   return new TransformStream({
-    async transform(chunk, controller) {
-      const flushedChunk = encodeText(await handleFlushEffect())
+    transform(chunk, controller) {
+      const flushedChunk = encodeText(handleFlushEffect())
 
       controller.enqueue(flushedChunk)
       controller.enqueue(chunk)
@@ -154,7 +154,7 @@ export async function continueFromInitialStream({
   suffix?: string
   dataStream?: ReadableStream<Uint8Array>
   generateStaticHTML: boolean
-  flushEffectHandler?: () => Promise<string>
+  flushEffectHandler?: () => string
   renderStream: ReadableStream<Uint8Array> & {
     allReady?: Promise<void>
   }
@@ -193,7 +193,7 @@ export async function renderToStream({
   suffix?: string
   dataStream?: ReadableStream<Uint8Array>
   generateStaticHTML: boolean
-  flushEffectHandler?: () => Promise<string>
+  flushEffectHandler?: () => string
 }): Promise<ReadableStream<Uint8Array>> {
   const renderStream = await renderToInitialStream({ ReactDOMServer, element })
   return continueFromInitialStream({
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 6b2b8648257a9b6..3f611c42405fc45 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -1430,25 +1430,20 @@ export async function renderToHTML(
 
       const bodyResult = async (suffix: string) => {
         // this must be called inside bodyResult so appWrappers is
-        // up to date when getWrappedApp is called
+        // up to date when `wrapApp` is called
 
-        const flushEffectHandler = async () => {
+        const flushEffectHandler = (): string => {
           const allFlushEffects = [
             styledJsxFlushEffect,
             ...(flushEffects || []),
           ]
-          const flushEffectStream = await renderToStream({
-            ReactDOMServer,
-            element: (
-              <>
-                {allFlushEffects.map((flushEffect, i) => (
-                  <React.Fragment key={i}>{flushEffect()}</React.Fragment>
-                ))}
-              </>
-            ),
-            generateStaticHTML: true,
-          })
-          const flushed = await streamToString(flushEffectStream)
+          const flushed = ReactDOMServer.renderToString(
+            <>
+              {allFlushEffects.map((flushEffect, i) => (
+                <React.Fragment key={i}>{flushEffect()}</React.Fragment>
+              ))}
+            </>
+          )
           return flushed
         }