Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ppr] Configuration for max react headers length #67715

Merged
merged 7 commits into from
Aug 2, 2024

Conversation

wyattjoh
Copy link
Member

What?

This exposes a new reactMaxHeadersLength config option for next.config.js:

module.exports = {
  reactMaxHeadersLength: 1000,
}

That allows configuration of the maximum value of all the headers generated from React. Currently only added when the experimental partial prerendering (PPR) feature is enabled, this today only affects the size of the Link header that is emitted which contains preloads for assets like fonts.

This also bumps the default value from 600 to 6000.

Why?

Some proxies may have differing support for max header sizes, so this was added as a configuration option to allow users to better control the output experience in these cases. At the time of writing, most proxies support a maximum of 8k bytes in the header, which is above the default 6k, allowing for other headers written by Next.js.

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. tests type: next labels Jul 12, 2024
Copy link
Member Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @wyattjoh and the rest of your teammates on Graphite Graphite

@wyattjoh wyattjoh requested a review from gnoff July 12, 2024 18:03
@@ -82,7 +82,8 @@
"test/e2e/app-dir/searchparams-static-bailout/searchparams-static-bailout.test.ts",
"test/e2e/app-dir/app-client-cache/client-cache.experimental.test.ts",
"test/e2e/app-dir/app-client-cache/client-cache.original.test.ts",
"test/e2e/app-dir/app-client-cache/client-cache.defaults.test.ts"
"test/e2e/app-dir/app-client-cache/client-cache.defaults.test.ts",
"test/e2e/app-dir/react-max-headers-length/react-max-headers-length.test.ts"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excluded because it already has PPR enabled.

packages/next/src/server/app-render/types.ts Show resolved Hide resolved
@ijjk
Copy link
Member

ijjk commented Jul 12, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jul 12, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
buildDuration 17.7s 17.7s N/A
buildDurationCached 8.6s 7.8s N/A
nodeModulesSize 353 MB 353 MB ⚠️ +6.46 kB
nextStartRea..uration (ms) 433ms 427ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
2318-HASH.js gzip 5.19 kB 5.19 kB
4701-HASH.js gzip 37.3 kB 37.3 kB N/A
5054.HASH.js gzip 168 B 169 B N/A
6052e2ca-HASH.js gzip 51.9 kB 51.9 kB N/A
framework-HASH.js gzip 56.8 kB 56.8 kB
main-app-HASH.js gzip 224 B 223 B N/A
main-HASH.js gzip 32.1 kB 32.1 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
_app-HASH.js gzip 193 B 192 B N/A
_error-HASH.js gzip 193 B 192 B N/A
amp-HASH.js gzip 512 B 509 B N/A
css-HASH.js gzip 342 B 343 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB N/A
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 364 B 365 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.39 kB 4.4 kB N/A
index-HASH.js gzip 268 B 269 B N/A
link-HASH.js gzip 2.81 kB 2.81 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 396 B 394 B N/A
withRouter-HASH.js gzip 324 B 324 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 1.02 kB 1.02 kB
Client Build Manifests
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
_buildManifest.js gzip 746 B 749 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
index.html gzip 520 B 522 B N/A
link.html gzip 534 B 537 B N/A
withRouter.html gzip 519 B 520 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
edge-ssr.js gzip 127 kB 127 kB N/A
page.js gzip 168 kB 168 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
middleware-b..fest.js gzip 670 B 668 B N/A
middleware-r..fest.js gzip 156 B 156 B
middleware.js gzip 29.6 kB 29.6 kB N/A
edge-runtime..pack.js gzip 1.03 kB 1.03 kB
Overall change 1.18 kB 1.18 kB
Next Runtimes
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
928-experime...dev.js gzip 310 B 310 B
928.runtime.dev.js gzip 301 B 301 B
app-page-exp...dev.js gzip 236 kB 236 kB N/A
app-page-exp..prod.js gzip 120 kB 120 kB N/A
app-page-tur..prod.js gzip 132 kB 132 kB N/A
app-page-tur..prod.js gzip 128 kB 128 kB N/A
app-page.run...dev.js gzip 231 kB 231 kB N/A
app-page.run..prod.js gzip 117 kB 117 kB N/A
app-route-ex...dev.js gzip 23.1 kB 23.1 kB N/A
app-route-ex..prod.js gzip 18.8 kB 18.8 kB N/A
app-route-tu..prod.js gzip 18.8 kB 18.8 kB N/A
app-route-tu..prod.js gzip 18.6 kB 18.6 kB N/A
app-route.ru...dev.js gzip 24.4 kB 24.4 kB N/A
app-route.ru..prod.js gzip 18.6 kB 18.6 kB N/A
pages-api-tu..prod.js gzip 9.6 kB 9.6 kB
pages-api.ru...dev.js gzip 9.87 kB 9.87 kB
pages-api.ru..prod.js gzip 9.59 kB 9.59 kB
pages-turbo...prod.js gzip 21.6 kB 21.6 kB
pages.runtim...dev.js gzip 22.2 kB 22.2 kB
pages.runtim..prod.js gzip 21.6 kB 21.6 kB
server.runti..prod.js gzip 56.7 kB 56.7 kB N/A
Overall change 95 kB 95 kB
build cache
vercel/next.js canary vercel/next.js feat/react-max-headers-length Change
0.pack gzip 1.42 MB 1.42 MB N/A
index.pack gzip 120 kB 120 kB N/A
Overall change 0 B 0 B
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 819: /***/ (
+    /***/ 1900: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(6660);
+          return __webpack_require__(7053);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2716: /***/ (module, exports, __webpack_require__) => {
+    /***/ 657: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(7286)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9054)
+        __webpack_require__(1124)
       );
-      const _getimgprops = __webpack_require__(4222);
-      const _imageconfig = __webpack_require__(2640);
-      const _imageconfigcontextsharedruntime = __webpack_require__(2928);
-      const _warnonce = __webpack_require__(4186);
-      const _routercontextsharedruntime = __webpack_require__(2313);
+      const _getimgprops = __webpack_require__(3934);
+      const _imageconfig = __webpack_require__(1);
+      const _imageconfigcontextsharedruntime = __webpack_require__(5909);
+      const _warnonce = __webpack_require__(643);
+      const _routercontextsharedruntime = __webpack_require__(5536);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2273)
+        __webpack_require__(4323)
       );
-      const _usemergedref = __webpack_require__(7216);
+      const _usemergedref = __webpack_require__(3902);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 7216: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3902: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 4222: /***/ (
+    /***/ 3934: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4186);
-      const _imageblursvg = __webpack_require__(5085);
-      const _imageconfig = __webpack_require__(2640);
+      const _warnonce = __webpack_require__(643);
+      const _imageblursvg = __webpack_require__(8324);
+      const _imageconfig = __webpack_require__(1);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 5085: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8324: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,11 @@
       /***/
     },
 
-    /***/ 53: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
+    /***/ 8160: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -908,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(4222);
-      const _imagecomponent = __webpack_require__(2716);
+      const _getimgprops = __webpack_require__(3934);
+      const _imagecomponent = __webpack_require__(657);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2273)
+        __webpack_require__(4323)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -943,7 +947,7 @@
       /***/
     },
 
-    /***/ 2273: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4323: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -978,7 +982,7 @@
       /***/
     },
 
-    /***/ 6660: /***/ (
+    /***/ 7053: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -995,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-3208e73e-20240730/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5083);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-3208e73e-20240730_re_s3gitrr3qfayhaiqo6mg4kjsm4/node_modules/next/image.js
-      var next_image = __webpack_require__(9480);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-3208e73e-20240730_re_glzdnwncgtmzypiltvd7r6clfq/node_modules/next/image.js
+      var next_image = __webpack_require__(5891);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1026,12 +1030,12 @@
       /***/
     },
 
-    /***/ 9480: /***/ (
+    /***/ 5891: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(53);
+      module.exports = __webpack_require__(8160);
 
       /***/
     },
@@ -1041,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(819)
+      __webpack_exec__(1900)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4644],
   {
-    /***/ 83: /***/ (
+    /***/ 4470: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(1300);
+          return __webpack_require__(1230);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3381: /***/ (module, exports) => {
+    /***/ 9109: /***/ (module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -110,7 +110,7 @@
       /***/
     },
 
-    /***/ 1469: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2818: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -122,7 +122,7 @@
           return getDomainLocale;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(5223);
+      const _normalizetrailingslash = __webpack_require__(2732);
       const basePath =
         /* unused pure expression or super */ null && (false || "");
       function getDomainLocale(path, locale, locales, domainLocales) {
@@ -146,7 +146,7 @@
       /***/
     },
 
-    /***/ 4010: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6063: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -163,18 +163,18 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(9146)
       );
-      const _resolvehref = __webpack_require__(7749);
-      const _islocalurl = __webpack_require__(2466);
-      const _formaturl = __webpack_require__(3293);
-      const _utils = __webpack_require__(4384);
-      const _addlocale = __webpack_require__(6647);
-      const _routercontextsharedruntime = __webpack_require__(2313);
-      const _approutercontextsharedruntime = __webpack_require__(425);
-      const _useintersection = __webpack_require__(6092);
-      const _getdomainlocale = __webpack_require__(1469);
-      const _addbasepath = __webpack_require__(4024);
-      const _routerreducertypes = __webpack_require__(3381);
-      const _usemergedref = __webpack_require__(7216);
+      const _resolvehref = __webpack_require__(1522);
+      const _islocalurl = __webpack_require__(726);
+      const _formaturl = __webpack_require__(6685);
+      const _utils = __webpack_require__(9748);
+      const _addlocale = __webpack_require__(6830);
+      const _routercontextsharedruntime = __webpack_require__(5536);
+      const _approutercontextsharedruntime = __webpack_require__(6498);
+      const _useintersection = __webpack_require__(5961);
+      const _getdomainlocale = __webpack_require__(2818);
+      const _addbasepath = __webpack_require__(6605);
+      const _routerreducertypes = __webpack_require__(9109);
+      const _usemergedref = __webpack_require__(3902);
       const prefetched = new Set();
       function prefetch(router, href, as, options, appOptions, isAppRouter) {
         if (false) {
@@ -599,7 +599,7 @@
       /***/
     },
 
-    /***/ 6092: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5961: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -612,7 +612,7 @@
         },
       });
       const _react = __webpack_require__(9146);
-      const _requestidlecallback = __webpack_require__(2743);
+      const _requestidlecallback = __webpack_require__(7160);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -725,7 +725,7 @@
       /***/
     },
 
-    /***/ 7216: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3902: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -794,7 +794,7 @@
       /***/
     },
 
-    /***/ 1300: /***/ (
+    /***/ 1230: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -809,7 +809,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5083);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(7769);
+        __webpack_require__(68);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -840,12 +840,8 @@
       /***/
     },
 
-    /***/ 7769: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4010);
+    /***/ 68: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(6063);
 
       /***/
     },
@@ -855,7 +851,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(83)
+      __webpack_exec__(4470)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 9b5eac0

packages/next/src/server/base-server.ts Outdated Show resolved Hide resolved
: undefined,
experimental: {
// Emitting Link headers currently requires the experimental PPR feature.
ppr: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

technically we do onHeaders for regular dynamic renders but I'm not sure it's worth the test infra to exercise this config value in all these different ways

@wyattjoh wyattjoh marked this pull request as ready for review August 1, 2024 22:05
description: The maximum length of the headers that are emitted by React and added to the response.
---

During static rendering, React can emit headers that can be added to the response. These can be used to improve performance by allowing the browser to preload resources like fonts, scripts, and stylesheets. The default value is `6000`, but you can override this value by configuring the `reactMaxHeadersLength` option in `next.config.js`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also add :nextjs: :docs: here → https://rc.nextjs.org/docs/app/building-your-application/styling/stylesheets about manually preloading stylesheets?

@samcx samcx self-requested a review August 2, 2024 22:14
…Length.mdx

Co-authored-by: Sam Ko <sam@vercel.com>
@wyattjoh wyattjoh merged commit 85383a6 into canary Aug 2, 2024
19 of 24 checks passed
@wyattjoh wyattjoh deleted the feat/react-max-headers-length branch August 2, 2024 22:15
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 17, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. locked tests type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants