Fix suffix ordering while streaming

packages/next/server/render.tsx

@@ -1564,14 +1564,14 @@ function createTransformStream({
           if (maybePromise) {
             await maybePromise
           }
-          writer.close()
+          await writer.close()
           return
         }
 
         transform(value, controller)
       }
     } catch (err) {
-      writer.abort(err)
+      await writer.abort(err)
     }
   })()
 
@@ -1634,18 +1634,7 @@ function renderToStream(
           suffixUnclosed: encoder.encode(suffix.split(closeTagString)[0]),
         }
       : null
-
-    const { readable, writable } = createTransformStream({
-      transform(chunk, controller) {
-        controller.enqueue(chunk)
-      },
-
-      flush(controller) {
-        if (suffixState) {
-          controller.enqueue(suffixState.closeTag)
-        }
-      },
-    })
+    const { readable, writable } = new TransformStream()
 
     const doResolve = () => {
       if (!resolved) {
@@ -1683,10 +1672,16 @@ function renderToStream(
                   })()
                 }
               },
-              flush() {
+              flush(controller) {
+                const flushClosingTag = () => {
+                  if (suffixState) {
+                    controller.enqueue(suffixState.closeTag)
+                  }
+                }
                 if (dataStreamFinished) {
-                  return dataStreamFinished
+                  return dataStreamFinished.then(flushClosingTag)
                 }
+                flushClosingTag()
               },
             })
           )

test/integration/react-streaming-and-server-components/test/streaming.js

@@ -104,4 +104,11 @@ export default function (context) {
       'count: 1'
     )
   })
+
+  it('should flush the suffix at the very end', async () => {
+    await fetchViaHTTP(context.appPort, '/').then(async (response) => {
+      const result = await resolveStreamResponse(response)
+      expect(result).toMatch(/<\/body><\/html>/)
+    })
+  })
 }