From efed27451b7ce8b475b4e42215ac95026312a4fd Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 5 May 2022 20:07:56 +0200 Subject: [PATCH] fix: duplicate app server --- packages/next/server/render.tsx | 30 ++++++++++++------- .../test/switchable-runtime.test.js | 17 ++++++----- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index 74a31bf900c2..4b5fa2efce7c 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -209,7 +209,11 @@ function renderPageTree( ) { const { router: _, ...rest } = props if (isServerComponent) { - return + return ( + + + + ) } return @@ -395,7 +399,7 @@ const useFlightResponse = createFlightHook() // Create the wrapper component for a Flight stream. function createServerComponentRenderer( App: any, - ComponentMod: any, + Component: any, { cachePrefix, inlinedTransformStream, @@ -408,12 +412,6 @@ function createServerComponentRenderer( serverComponentManifest: NonNullable } ) { - // We need to expose the `__webpack_require__` API globally for - // react-server-dom-webpack. This is a hack until we find a better way. - // @ts-ignore - globalThis.__webpack_require__ = ComponentMod.__next_rsc__.__webpack_require__ - const Component = interopDefault(ComponentMod) - function ServerComponentWrapper({ router, ...props }: any) { const id = (React as any).useId() @@ -522,7 +520,13 @@ export async function renderToHTML( if (isServerComponent) { serverComponentsInlinedTransformStream = new TransformStream() const search = urlQueryToSearchParams(query).toString() - Component = createServerComponentRenderer(App, ComponentMod, { + // We need to expose the `__webpack_require__` API globally for + // react-server-dom-webpack. This is a hack until we find a better way. + // @ts-ignore + globalThis.__webpack_require__ = + ComponentMod.__next_rsc__.__webpack_require__ + + Component = createServerComponentRenderer(App, Component, { cachePrefix: pathname + (search ? `?${search}` : ''), inlinedTransformStream: serverComponentsInlinedTransformStream, staticTransformStream: serverComponentsPageDataTransformStream, @@ -745,6 +749,7 @@ export async function renderToHTML( locales: renderOpts.locales, defaultLocale: renderOpts.defaultLocale, AppTree: (props: any) => { + console.log('AppTree') return ( {renderPageTree( @@ -1243,6 +1248,7 @@ export async function renderToHTML( if (isResSent(res) && !isSSG) return null if (renderServerComponentData) { + console.log('flight data') return new RenderResult( renderToReadableStream( renderPageTree( @@ -1252,7 +1258,7 @@ export async function renderToHTML( ...props.pageProps, ...serverComponentProps, }, - isServerComponent + true ), serverComponentManifest ).pipeThrough(createBufferedTransformStream()) @@ -1376,6 +1382,7 @@ export async function renderToHTML( }) } + console.log('renderToString') const html = ReactDOMServer.renderToString( @@ -1420,7 +1427,8 @@ export async function renderToHTML( {renderPageTree( - EnhancedApp, + // AppServer is included in the EnhancedComponent in ServerComponentWrapper + isServerComponent ? React.Fragment : EnhancedApp, EnhancedComponent, { ...(isServerComponent ? props.pageProps : props), router }, isServerComponent diff --git a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js index c5d9af48aa44..a3e1f7b2c1ec 100644 --- a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js +++ b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js @@ -38,13 +38,16 @@ async function testRoute(appPort, url, { isStatic, isEdge, isRSC }) { // Should be re-rendered. expect(renderedAt1).toBeLessThan(renderedAt2) } - if (isRSC) { - const appServerOccurrence = html1.match(/class="app-server-root"/g) || [] - expect(appServerOccurrence.length).toBe(1) - expect(html1).not.toContain('"app-client-root"') - } else { - expect(html1).not.toContain('"app-server-root"') - } + // If the page is using 1 root, it won't use the other. + // e.g. server component page won't have client app root. + const rootClasses = ['app-server-root', 'app-client-root'] + const [rootClass, oppositeRootClass] = isRSC + ? [rootClasses[0], rootClasses[1]] + : [rootClasses[1], rootClasses[0]] + const appServerOccurrence = + html1.match(new RegExp(`class="${rootClass}"`, 'g')) || [] + expect(appServerOccurrence.length).toBe(1) + expect(html1).not.toContain(`"${oppositeRootClass}"`) } describe('Switchable runtime (prod)', () => {