Remove unused id rsc cache cleaning and avoid rsc refresh existed in client chunk (#37404)

* refactor: remove useless id removal for rsc cache
* avoid refresh root existed in main client chunk
  - x-ref: #36702 
  - x-ref: #35907

packages/next/client/index.tsx

@@ -30,7 +30,6 @@ import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
 import { getProperError } from '../lib/is-error'
-import { RefreshContext } from './streaming/refresh'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { ImageConfigComplete } from '../shared/lib/image-config'
 import { removeBasePath } from './remove-base-path'
@@ -675,6 +674,7 @@ if (process.env.__NEXT_RSC) {
     createFromFetch,
     createFromReadableStream,
   } = require('next/dist/compiled/react-server-dom-webpack')
+  const { RefreshContext } = require('./streaming/refresh')
 
   const encoder = new TextEncoder()
 

packages/next/server/app-render.tsx

@@ -105,10 +105,11 @@ function preloadDataFetchingRecord(
 
 function useFlightResponse(
   writable: WritableStream<Uint8Array>,
-  id: string,
+  cachePrefix: string,
   req: ReadableStream<Uint8Array>,
   serverComponentManifest: any
 ) {
+  const id = cachePrefix + ',' + (React as any).useId()
   let entry = rscCache.get(id)
   if (!entry) {
     const [renderStream, forwardStream] = readableStreamTee(req)
@@ -180,7 +181,6 @@ function createServerComponentRenderer(
 
   const writable = transformStream.writable
   const ServerComponentWrapper = (props: any) => {
-    const id = (React as any).useId()
     const reqStream: ReadableStream<Uint8Array> = renderToReadableStream(
       <ComponentToRender {...props} />,
       serverComponentManifest
@@ -188,12 +188,11 @@ function createServerComponentRenderer(
 
     const response = useFlightResponse(
       writable,
-      cachePrefix + ',' + id,
+      cachePrefix,
       reqStream,
       serverComponentManifest
     )
     const root = response.readRoot()
-    rscCache.delete(id)
     return root
   }
 

packages/next/server/render.tsx

@@ -313,18 +313,19 @@ function checkRedirectValues(
 const rscCache = new Map()
 
 function useFlightResponse({
-  id,
+  cachePrefix,
   req,
   pageData,
   inlinedDataWritable,
   serverComponentManifest,
 }: {
-  id: string
+  cachePrefix: string
   req: ReadableStream<Uint8Array>
   pageData: { current: string } | null
   inlinedDataWritable: WritableStream<Uint8Array>
   serverComponentManifest: any
 }) {
+  const id = cachePrefix + ',' + (React as any).useId()
   let entry = rscCache.get(id)
   if (!entry) {
     const [renderStream, forwardStream] = readableStreamTee(req)
@@ -391,15 +392,13 @@ function createServerComponentRenderer(
   }
 ) {
   function ServerComponentWrapper({ router, ...props }: any) {
-    const id = (React as any).useId()
-
     const reqStream: ReadableStream<Uint8Array> = renderToReadableStream(
       <Component {...props} />,
       serverComponentManifest
     )
 
     const response = useFlightResponse({
-      id: cachePrefix + ',' + id,
+      cachePrefix,
       req: reqStream,
       pageData,
       inlinedDataWritable: inlinedTransformStream.writable,
@@ -407,7 +406,6 @@ function createServerComponentRenderer(
     })
 
     const root = response.readRoot()
-    rscCache.delete(id)
     return root
   }
 

test/integration/production/test/index.test.js

@@ -313,7 +313,7 @@ describe('Production Usage', () => {
     expect(content).not.toContain('.currentScript')
   })
 
-  it('should not contain useAmp in main chunk', async () => {
+  it('should not contain amp, rsc APIs in main chunk', async () => {
     const globResult = await glob('main-*.js', {
       cwd: join(appDir, '.next/static/chunks'),
     })
@@ -328,6 +328,7 @@ describe('Production Usage', () => {
     )
 
     expect(content).not.toContain('useAmp')
+    expect(content).not.toContain('useRefreshRoot')
   })
 
   describe('With basic usage', () => {