Custom app for server components #33149

huozhi · 2022-01-10T15:29:46Z

Feature

Resolves #30996

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

packages/next/server/render.tsx

test/integration/react-streaming-and-server-components/app/components/container.server.js

shuding

Good job!

packages/next/client/index.tsx

packages/next/build/webpack/loaders/next-flight-server-loader.ts

shuding

The new changes are much more cleaner

ijjk · 2022-01-14T12:54:41Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
buildDuration	14.6s	14.7s	⚠️ +90ms
buildDurationCached	3.3s	3.3s	-28ms
nodeModulesSize	355 MB	355 MB	⚠️ +3.9 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.889	2.933	⚠️ +0.04
/ avg req/sec	865.37	852.43	⚠️ -12.94
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.32	1.354	⚠️ +0.03
/error-in-render avg req/sec	1893.26	1846.98	⚠️ -46.28

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	⚠️ +8 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71 kB	71 kB	⚠️ +8 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js rsc/app	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js rsc/app	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.7 kB	4.7 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.13 kB	2.13 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js rsc/app	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
index.html gzip	530 B	531 B	⚠️ +1 B
link.html gzip	544 B	545 B	⚠️ +1 B
withRouter.html gzip	525 B	526 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +3 B

Diffs

Diff for main-HASH.js

@@ -596,6 +596,34 @@
         for (var i = 1; i < arguments.length; i++) _loop(i);
         return target;
       }
+      function _objectWithoutProperties(source, excluded) {
+        if (source == null) return {};
+        var target = _objectWithoutPropertiesLoose(source, excluded);
+        var key, i;
+        if (Object.getOwnPropertySymbols) {
+          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+          for (i = 0; i < sourceSymbolKeys.length; i++) {
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key))
+              continue;
+            target[key] = source[key];
+          }
+        }
+        return target;
+      }
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+        return target;
+      }
       var data = JSON.parse(
         document.getElementById("__NEXT_DATA__").textContent
       );
@@ -1208,6 +1236,16 @@
           )
         );
       }
+      function renderApp(App, appProps) {
+        if (false) {
+          var Component, _, __, props;
+        } else {
+          return /*#__PURE__*/ _react.default.createElement(
+            App,
+            Object.assign({}, appProps)
+          );
+        }
+      }
       var wrapApp = function(App) {
         return function(wrappedAppProps) {
           var appProps = _objectSpread({}, wrappedAppProps, {
@@ -1218,10 +1256,7 @@
           return /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            )
+            renderApp(App, appProps)
           );
         };
       };
@@ -1383,10 +1418,7 @@
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            ),
+            renderApp(App, appProps),
             /*#__PURE__*/ _react.default.createElement(
               _portal.Portal,
               {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
buildDuration	16.1s	16.1s	-53ms
buildDurationCached	3.3s	3.3s	⚠️ +5ms
nodeModulesSize	355 MB	355 MB	⚠️ +3.9 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js rsc/app	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.924	2.875	-0.05
/ avg req/sec	855.06	869.52	+14.46
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.354	1.265	-0.09
/error-in-render avg req/sec	1846.52	1976.21	+129.69

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js rsc/app	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.3 kB	⚠️ +5 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js rsc/app	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js rsc/app	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.73 kB	4.73 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js rsc/app	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	huozhi/next.js rsc/app	Change
index.html gzip	532 B	531 B	-1 B
link.html gzip	545 B	545 B	✓
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.6 kB	1.6 kB	-2 B

Diffs

Diff for main-HASH.js

@@ -596,6 +596,34 @@
         for (var i = 1; i < arguments.length; i++) _loop(i);
         return target;
       }
+      function _objectWithoutProperties(source, excluded) {
+        if (source == null) return {};
+        var target = _objectWithoutPropertiesLoose(source, excluded);
+        var key, i;
+        if (Object.getOwnPropertySymbols) {
+          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+          for (i = 0; i < sourceSymbolKeys.length; i++) {
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key))
+              continue;
+            target[key] = source[key];
+          }
+        }
+        return target;
+      }
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+        return target;
+      }
       var data = JSON.parse(
         document.getElementById("__NEXT_DATA__").textContent
       );
@@ -1208,6 +1236,16 @@
           )
         );
       }
+      function renderApp(App, appProps) {
+        if (false) {
+          var Component, _, __, props;
+        } else {
+          return /*#__PURE__*/ _react.default.createElement(
+            App,
+            Object.assign({}, appProps)
+          );
+        }
+      }
       var wrapApp = function(App) {
         return function(wrappedAppProps) {
           var appProps = _objectSpread({}, wrappedAppProps, {
@@ -1218,10 +1256,7 @@
           return /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            )
+            renderApp(App, appProps)
           );
         };
       };
@@ -1383,10 +1418,7 @@
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            ),
+            renderApp(App, appProps),
             /*#__PURE__*/ _react.default.createElement(
               _portal.Portal,
               {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b322fad352d24c1.js"
+      src="/_next/static/chunks/main-b72ca22dbd9e018c.js"
       defer=""
     ></script>
     <script

Commit: 55f7588

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Jan 10, 2022

huozhi changed the title ~~Rsc/app~~ Custom app for server components Jan 10, 2022

This comment has been minimized.

Sign in to view

huozhi added 3 commits January 10, 2022 17:20

rsc: app

212e345

add test

645cd45

fix app tree

d8fa67d

huozhi force-pushed the rsc/app branch from 0c99a8c to d8fa67d Compare January 10, 2022 16:20

This comment has been minimized.

Sign in to view

fix

7f5f55b

This comment has been minimized.

Sign in to view

use defined variable as cond

6fe35eb

This comment has been minimized.

Sign in to view

override runtime var

c228bbf

This comment has been minimized.

Sign in to view

ssr app tree

afd9a4e

huozhi force-pushed the rsc/app branch from 3b6023f to afd9a4e Compare January 12, 2022 15:24

huozhi marked this pull request as ready for review January 12, 2022 16:03

huozhi requested review from ijjk, padmaia, shuding and timneutkens as code owners January 12, 2022 16:03

This comment has been minimized.

Sign in to view

shuding reviewed Jan 12, 2022

View reviewed changes

packages/next/server/render.tsx Outdated Show resolved Hide resolved

shuding reviewed Jan 12, 2022

View reviewed changes

test/integration/react-streaming-and-server-components/app/components/container.server.js Outdated Show resolved Hide resolved

shuding reviewed Jan 12, 2022

View reviewed changes

huozhi requested a review from devknoll January 12, 2022 19:09

devknoll reviewed Jan 12, 2022

View reviewed changes

packages/next/client/index.tsx Outdated Show resolved Hide resolved

define rsc tag by loader

036a0ce

huozhi force-pushed the rsc/app branch from 282af9e to 036a0ce Compare January 13, 2022 21:03

replace substr with substring

21bcdbd

huozhi commented Jan 13, 2022

View reviewed changes

packages/next/build/webpack/loaders/next-flight-server-loader.ts Show resolved Hide resolved

This comment has been minimized.

Sign in to view

huozhi requested review from devknoll and shuding January 13, 2022 21:51

use loader option instead of assigning process env var

e5548f3

This comment has been minimized.

Sign in to view

shuding approved these changes Jan 14, 2022

View reviewed changes

Merge branch 'canary' into rsc/app

25a2e39

This comment has been minimized.

Sign in to view

Merge branch 'canary' into rsc/app

55f7588

kodiakhq bot merged commit 00a8432 into vercel:canary Jan 14, 2022

huozhi deleted the rsc/app branch January 14, 2022 13:03

vercel locked as resolved and limited conversation to collaborators Feb 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom app for server components #33149

Custom app for server components #33149

huozhi commented Jan 10, 2022

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shuding left a comment

This comment has been minimized.

This comment has been minimized.

shuding left a comment

This comment has been minimized.

ijjk commented Jan 14, 2022

Diffs

Diffs

Custom app for server components #33149

Custom app for server components #33149

Conversation

huozhi commented Jan 10, 2022

Feature

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Jan 14, 2022

Stats from current PR

Diffs

Diffs