From 5558405f947cd0aa7f6036d65ea3eb443e835e53 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 5 May 2022 17:45:21 +0200 Subject: [PATCH 1/3] fix: duplicate app server --- packages/next/server/render.tsx | 7 +------ .../switchable-runtime/pages/_app.js | 7 +++++++ .../test/switchable-runtime.test.js | 7 ++++--- 3 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index f38083b00d1b..74a31bf900c2 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -208,13 +208,8 @@ function renderPageTree( isServerComponent: boolean ) { const { router: _, ...rest } = props - if (isServerComponent) { - return ( - - - - ) + return } return diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js new file mode 100644 index 000000000000..57b0da821094 --- /dev/null +++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/_app.js @@ -0,0 +1,7 @@ +export default function App({ Component, pageProps }) { + return ( +
+ +
+ ) +} 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 eec271208a27..c5d9af48aa44 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,11 +38,12 @@ async function testRoute(appPort, url, { isStatic, isEdge, isRSC }) { // Should be re-rendered. expect(renderedAt1).toBeLessThan(renderedAt2) } - const customAppServerHtml = '
Date: Thu, 5 May 2022 20:07:56 +0200 Subject: [PATCH 2/3] 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)', () => { From f8e4aa2f9ed50b9d2f06b007dfc3b738e268ade5 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 5 May 2022 20:09:07 +0200 Subject: [PATCH 3/3] rm logs --- packages/next/server/render.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index 4b5fa2efce7c..ca0b4c5111b3 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -749,7 +749,6 @@ export async function renderToHTML( locales: renderOpts.locales, defaultLocale: renderOpts.defaultLocale, AppTree: (props: any) => { - console.log('AppTree') return ( {renderPageTree( @@ -1248,7 +1247,6 @@ export async function renderToHTML( if (isResSent(res) && !isSSG) return null if (renderServerComponentData) { - console.log('flight data') return new RenderResult( renderToReadableStream( renderPageTree( @@ -1382,7 +1380,6 @@ export async function renderToHTML( }) } - console.log('renderToString') const html = ReactDOMServer.renderToString(