Fix: change the timing for clearing the inlined data buffer

packages/next/client/index.tsx

@@ -1,6 +1,6 @@
 /* global location */
 import '../build/polyfills/polyfill-module'
-import React, { useState } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import mitt, { MittEmitter } from '../shared/lib/mitt'
@@ -703,16 +703,6 @@ if (process.env.__NEXT_RSC) {
     }
     initialServerDataWriter = writer
   }
-  // When `DOMContentLoaded`, we can close all pending writers to finish hydration.
-  document.addEventListener(
-    'DOMContentLoaded',
-    function () {
-      if (initialServerDataWriter && !initialServerDataWriter.closed) {
-        initialServerDataWriter.close()
-      }
-    },
-    false
-  )
 
   const nextServerDataLoadingGlobal = ((self as any).__next_s =
     (self as any).__next_s || [])
@@ -734,15 +724,19 @@ if (process.env.__NEXT_RSC) {
     return fetch(url.toString())
   }
 
-  function useServerResponse(cacheKey: string, serialized?: string) {
+  function useServerResponse(
+    cacheKey: string,
+    serialized?: string,
+    fresh?: boolean
+  ) {
     let response = rscCache.get(cacheKey)
     if (response) return response
 
     if (initialServerDataBuffer) {
       const t = new TransformStream()
       const writer = t.writable.getWriter()
       response = createFromFetch(Promise.resolve({ body: t.readable }))
-      nextServerDataRegisterWriter(writer)
+      fresh && nextServerDataRegisterWriter(writer)
     } else {
       const fetchPromise = serialized
         ? (() => {
@@ -764,25 +758,38 @@ if (process.env.__NEXT_RSC) {
   const ServerRoot = ({
     cacheKey,
     serialized,
+    fresh,
   }: {
     cacheKey: string
     serialized?: string
+    fresh?: boolean
   }) => {
     React.useEffect(() => {
       rscCache.delete(cacheKey)
     })
     React.useEffect(() => {
-      initialServerDataBuffer = undefined
+      // When `DOMContentLoaded`, we can close all pending writers to finish hydration.
+      fresh &&
+        document.addEventListener(
+          'DOMContentLoaded',
+          function () {
+            if (initialServerDataWriter && !initialServerDataWriter.closed) {
+              initialServerDataWriter.close()
+            }
+            initialServerDataBuffer = undefined
+          },
+          false
+        )
     }, [])
-    const response = useServerResponse(cacheKey, serialized)
+    const response = useServerResponse(cacheKey, serialized, fresh)
     const root = response.readRoot()
     return root
   }
 
   RSCComponent = (props: any) => {
     const cacheKey = getCacheKey()
-    const { __flight_serialized__ } = props
-    const [, dispatch] = useState({})
+    const { __flight_serialized__, __flight_fresh__ } = props
+    const [, dispatch] = React.useState({})
     const startTransition = (React as any).startTransition
     const rerender = () => dispatch({})
     // If there is no cache, or there is serialized data already
@@ -800,7 +807,11 @@ if (process.env.__NEXT_RSC) {
 
     return (
       <RefreshContext.Provider value={refreshCache}>
-        <ServerRoot cacheKey={cacheKey} serialized={__flight_serialized__} />
+        <ServerRoot
+          cacheKey={cacheKey}
+          serialized={__flight_serialized__}
+          fresh={__flight_fresh__}
+        />
       </RefreshContext.Provider>
     )
   }

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

@@ -20,7 +20,7 @@ import {
 } from './utils'
 
 import css from './css'
-import rsc from './rsc'
+import rsc, { testInitialStreaming } from './rsc'
 import streaming from './streaming'
 import basic from './basic'
 import runtime from './runtime'
@@ -146,6 +146,7 @@ describe('Edge runtime - prod', () => {
   })
 
   const options = { runtime: 'edge', env: 'prod' }
+  testInitialStreaming(context, options)
   basic(context, options)
   streaming(context, options)
   rsc(context, options)
@@ -172,6 +173,7 @@ describe('Edge runtime - dev', () => {
   })
 
   const options = { runtime: 'edge', env: 'dev' }
+  testInitialStreaming(context, options)
   basic(context, options)
   streaming(context, options)
   rsc(context, options)
@@ -181,6 +183,7 @@ describe('Edge runtime - dev', () => {
 const nodejsRuntimeBasicSuite = {
   runTests: (context, env) => {
     const options = { runtime: 'nodejs', env }
+    testInitialStreaming(context, options)
     basic(context, options)
     streaming(context, options)
     rsc(context, options)

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

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import webdriver from 'next-webdriver'
-import { renderViaHTTP, check } from 'next-test-utils'
+import { renderViaHTTP, check, hasRedbox } from 'next-test-utils'
 import { join } from 'path'
 import fs from 'fs-extra'
 import { distDir, getNodeBySelector } from './utils'
@@ -79,10 +79,6 @@ export default function (context, { runtime, env }) {
 
     const browser = await webdriver(context.appPort, '/next-api/link')
 
-    // We need to make sure the app is fully hydrated before clicking, otherwise
-    // it will be a full redirection instead of being taken over by the next
-    // router. This timeout prevents it being flaky caused by fast refresh's
-    // rebuilding event.
     await new Promise((res) => setTimeout(res, 1000))
     await browser.eval('window.beforeNav = 1')
 
@@ -92,7 +88,8 @@ export default function (context, { runtime, env }) {
     await browser.waitForElementByCss('#next_id').click()
     await check(() => browser.elementByCss('#query').text(), 'query:2')
 
-    expect(await browser.eval('window.beforeNav')).toBe(1)
+    // Force navigation
+    expect(await browser.eval('window.beforeNav')).toBe(undefined)
   })
 
   it('should be able to navigate between rsc pages', async () => {
@@ -225,3 +222,17 @@ export default function (context, { runtime, env }) {
     expect(getNodeBySelector(pageUnknownHTML, id).text()).toBe(content)
   })
 }
+
+// should be always the initial call of streaming rendering
+export function testInitialStreaming(context, { env }) {
+  if (env === 'dev') {
+    it('should handle correctly if initial render is streaming rsc', async () => {
+      const browser = await webdriver(context.appPort, '/streaming-rsc')
+      const content = await browser.eval(
+        `document.querySelector('#content').innerText`
+      )
+      expect(await hasRedbox(browser, false)).toBe(false)
+      expect(content).toMatchInlineSnapshot('"next_streaming_data"')
+    })
+  }
+}