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)', () => {