Fix broken html on streaming render for error page

vercel · Jan 17, 2022 · 9f6f142 · 9f6f142
1 parent 790db2c
commit 9f6f142
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -1544,10 +1544,6 @@ function renderToNodeStream(
   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)
 
     // Based on the suggestion here:
     // https://github.com/reactwg/react-18/discussions/110
@@ -1569,11 +1565,6 @@ function renderToNodeStream(
         } else {
           callback()
         }
-
-        if (!shellFlushed) {
-          shellFlushed = true
-          underlyingStream.write(suffixUnclosed)
-        }
       }
 
       flush() {
@@ -1582,7 +1573,6 @@ function renderToNodeStream(
             'invariant: flush called without an underlying stream. This is a bug in Next.js'
           )
         }
-
         const anyWritable = underlyingStream as any
         if (typeof anyWritable.flush === 'function') {
           anyWritable.flush()
@@ -1604,7 +1594,7 @@ function renderToNodeStream(
         resolve((res, next) => {
           const doNext = (err?: Error) => {
             if (!err) {
-              res.write(closeTag)
+              res.write(suffix)
             }
             underlyingStream = null
             queuedCallbacks = []

diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -266,7 +266,7 @@ runSuite('document', 'prod', documentSuite)
 
 async function runBasicTests(context, env) {
   const isDev = env === 'dev'
-  it('should render the correct html', async () => {
+  it('should render html correctly', async () => {
     const homeHTML = await renderViaHTTP(context.appPort, '/', null, {
       headers: {
         'x-next-test-client': 'test-util',
@@ -293,6 +293,8 @@ async function runBasicTests(context, env) {
       '/this-is-not-found'
     )
 
+    const page404Content = 'custom-404-page'
+
     expect(homeHTML).toContain('component:index.server')
     expect(homeHTML).toContain('env:env_var_test')
     expect(homeHTML).toContain('header:test-util')
@@ -302,12 +304,14 @@ async function runBasicTests(context, env) {
     expect(dynamicRouteHTML1).toContain('[pid]')
     expect(dynamicRouteHTML2).toContain('[pid]')
 
-    expect(path404HTML).toContain('custom-404-page')
+    const $404 = cheerio.load(path404HTML)
+    expect($404('#__next').text()).toBe(page404Content)
+
     // in dev mode: custom error page is still using default _error
     expect(path500HTML).toContain(
       isDev ? 'Internal Server Error' : 'custom-500-page'
     )
-    expect(pathNotFoundHTML).toContain('custom-404-page')
+    expect(pathNotFoundHTML).toContain(page404Content)
   })
 
   it('should support next/link', async () => {