rsc: app

vercel · Jan 10, 2022 · 212e345 · 212e345
1 parent 8ae08b9
commit 212e345
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 45 deletions.
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
@@ -79,12 +79,13 @@ export function createPagesMapping(
   // allow falling back to the correct source file so
   // that HMR can work properly when a file is added/removed
   const documentPage = `_document${hasConcurrentFeatures ? '-web' : ''}`
+  const appPage = `_app${hasServerComponents ? '.server' : ''}`
   if (isDev) {
     pages['/_app'] = `${PAGES_DIR_ALIAS}/_app`
     pages['/_error'] = `${PAGES_DIR_ALIAS}/_error`
     pages['/_document'] = `${PAGES_DIR_ALIAS}/_document`
   } else {
-    pages['/_app'] = pages['/_app'] || 'next/dist/pages/_app'
+    pages['/_app'] = pages['/_app'] || `next/dist/pages/${appPage}`
     pages['/_error'] = pages['/_error'] || 'next/dist/pages/_error'
     pages['/_document'] =
       pages['/_document'] || `next/dist/pages/${documentPage}`

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -546,7 +546,7 @@ export default async function getBaseWebpackConfig(
         prev.push(path.join(pagesDir, `_app.${ext}`))
         return prev
       }, [] as string[]),
-      'next/dist/pages/_app.js',
+      `next/dist/pages/_app${hasServerComponents ? '.server' : ''}.js`,
     ]
     customAppAliases[`${PAGES_DIR_ALIAS}/_error`] = [
       ...config.pageExtensions.reduce((prev, ext) => {

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -629,6 +629,25 @@ function AppContainer({
   )
 }
 
+function renderApp(
+  App: AppComponent | React.ComponentType,
+  appProps: AppProps
+) {
+  if (process.env.__NEXT_RSC) {
+    const { Component, router: _, err: __, ...props } = appProps
+    const AppServerComponent = App as React.ComponentType<{
+      children: React.ReactNode
+    }>
+    return (
+      <AppServerComponent>
+        <Component {...props} />
+      </AppServerComponent>
+    )
+  } else {
+    return <App {...appProps} />
+  }
+}
+
 const wrapApp =
   (App: AppComponent) =>
   (wrappedAppProps: Record<string, any>): JSX.Element => {
@@ -640,7 +659,8 @@ const wrapApp =
     }
     return (
       <AppContainer>
-        <App {...appProps} />
+        {renderApp(App, appProps)}
+        {/* <App {...appProps} /> */}
       </AppContainer>
     )
   }
@@ -957,7 +977,8 @@ function doRender(input: RenderRouteInfo): Promise<any> {
     <>
       <Head callback={onHeadCommit} />
       <AppContainer>
-        <App {...appProps} />
+        {/* <App {...appProps} /> */}
+        {renderApp(App, appProps)}
         <Portal type="next-route-announcer">
           <RouteAnnouncer />
         </Portal>

diff --git a/packages/next/pages/_app.server.tsx b/packages/next/pages/_app.server.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function App({ children }: { children: React.ReactNode }) {
+  return children
+}
diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
@@ -1220,6 +1220,7 @@ export default abstract class Server {
               parsed: parsed,
             })
           } catch (err) {
+            console.error('err', err)
             if (isError(err) && err.code === 'ENOENT') {
               await this.render404(req, res, parsed)
               return { finished: true }
@@ -1403,6 +1404,7 @@ export default abstract class Server {
             finished: true,
           }
         } catch (err) {
+          console.error('n err', err)
           if (err instanceof NoFallbackError && bubbleNoFallback) {
             return {
               finished: false,

diff --git a/packages/next/server/dev/next-dev-server.ts b/packages/next/server/dev/next-dev-server.ts
@@ -405,11 +405,15 @@ export default class DevServer extends Server {
 
     process.on('unhandledRejection', (reason) => {
       this.logErrorWithOriginalStack(reason, 'unhandledRejection').catch(
-        () => {}
+        (err) => {
+          console.error(err)
+        }
       )
     })
     process.on('uncaughtException', (err) => {
-      this.logErrorWithOriginalStack(err, 'uncaughtException').catch(() => {})
+      this.logErrorWithOriginalStack(err, 'uncaughtException').catch((e) => {
+        console.error(e)
+      })
     })
   }
 
@@ -667,6 +671,7 @@ export default class DevServer extends Server {
       }
     }
 
+    console.error(err)
     if (!usedOriginalStack) {
       if (type === 'warning') {
         Log.warn(err + '')

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -182,6 +182,25 @@ function enhanceComponents(
   }
 }
 
+function renderApp(
+  App: AppType | React.ComponentType,
+  Component: React.ComponentType,
+  router: ServerRouter,
+  props: any,
+  isServerComponent: boolean
+) {
+  if (isServerComponent) {
+    let AppServerComponent = App as React.ComponentType
+    return (
+      <AppServerComponent>
+        <Component {...props} router={router} />
+      </AppServerComponent>
+    )
+  } else {
+    return <App {...props} Component={Component} router={router} />
+  }
+}
+
 export type RenderOptsPartial = {
   buildId: string
   canonicalBase: string
@@ -642,11 +661,7 @@ export async function renderToHTML(
     locales: renderOpts.locales,
     defaultLocale: renderOpts.defaultLocale,
     AppTree: (props: any) => {
-      return (
-        <AppContainerWithIsomorphicFiberStructure>
-          <App {...props} Component={Component} router={router} />
-        </AppContainerWithIsomorphicFiberStructure>
-      )
+      return renderApp(App, Component, router, props, isServerComponent)
     },
     defaultGetInitialProps: async (
       docCtx: DocumentContext,
@@ -714,11 +729,9 @@ export async function renderToHTML(
   // not be useful.
   // https://github.com/facebook/react/pull/22644
   const Noop = () => null
-  const AppContainerWithIsomorphicFiberStructure = ({
-    children,
-  }: {
+  const AppContainerWithIsomorphicFiberStructure: React.FC<{
     children: JSX.Element
-  }) => {
+  }> = ({ children }) => {
     return (
       <>
         {/* <Head/> */}
@@ -1164,11 +1177,13 @@ export async function renderToHTML(
         const html = ReactDOMServer.renderToString(
           <Body>
             <AppContainerWithIsomorphicFiberStructure>
-              <EnhancedApp
-                Component={EnhancedComponent}
-                router={router}
-                {...props}
-              />
+              {renderApp(
+                EnhancedApp,
+                EnhancedComponent,
+                router,
+                props,
+                isServerComponent
+              )}
             </AppContainerWithIsomorphicFiberStructure>
           </Body>
         )
@@ -1201,22 +1216,26 @@ export async function renderToHTML(
     } else {
       let bodyResult
 
+      const renderContent = () => {
+        return ctx.err && ErrorDebug ? (
+          <Body>
+            <ErrorDebug error={ctx.err} />
+          </Body>
+        ) : (
+          <Body>
+            <AppContainerWithIsomorphicFiberStructure>
+              {renderApp(App, Component, router, props, isServerComponent)}
+            </AppContainerWithIsomorphicFiberStructure>
+          </Body>
+        )
+      }
+
       if (concurrentFeatures) {
         bodyResult = async (suffix: string) => {
           // this must be called inside bodyResult so appWrappers is
           // up to date when getWrappedApp is called
-          const content =
-            ctx.err && ErrorDebug ? (
-              <Body>
-                <ErrorDebug error={ctx.err} />
-              </Body>
-            ) : (
-              <Body>
-                <AppContainerWithIsomorphicFiberStructure>
-                  <App {...props} Component={Component} router={router} />
-                </AppContainerWithIsomorphicFiberStructure>
-              </Body>
-            )
+
+          const content = renderContent()
           return process.browser
             ? await renderToWebStream(
                 content,
@@ -1226,18 +1245,7 @@ export async function renderToHTML(
             : await renderToNodeStream(content, suffix, generateStaticHTML)
         }
       } else {
-        const content =
-          ctx.err && ErrorDebug ? (
-            <Body>
-              <ErrorDebug error={ctx.err} />
-            </Body>
-          ) : (
-            <Body>
-              <AppContainerWithIsomorphicFiberStructure>
-                <App {...props} Component={Component} router={router} />
-              </AppContainerWithIsomorphicFiberStructure>
-            </Body>
-          )
+        const content = renderContent()
         // for non-concurrent rendering we need to ensure App is rendered
         // before _document so that updateHead is called/collected before
         // rendering _document's head

diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -1651,6 +1651,13 @@ export async function pages_app(task, opts) {
     .target('dist/pages')
 }
 
+export async function pages_app_server(task, opts) {
+  await task
+    .source('pages/_app.server.tsx')
+    .swc('client', { dev: opts.dev })
+    .target('dist/pages')
+}
+
 export async function pages_error(task, opts) {
   await task
     .source('pages/_error.tsx')
@@ -1674,7 +1681,13 @@ export async function pages_document_server(task, opts) {
 
 export async function pages(task, opts) {
   await task.parallel(
-    ['pages_app', 'pages_error', 'pages_document', 'pages_document_server'],
+    [
+      'pages_app',
+      'pages_error',
+      'pages_document',
+      'pages_document_server',
+      'pages_app_server',
+    ],
     opts
   )
 }