Partial Fallback Prerendering Dynamic Shells #69282

wyattjoh · 2024-08-25T18:18:55Z

No description provided.

wyattjoh · 2024-08-25T18:19:13Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

Partial Fallback Prerendering Dynamic Shells #69282 👈
Partial Fallback Prerendering #68958 : 1 other dependent PR (#69378 )
fix: fix the safari and firefox test modes #69384
canary

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

Join @wyattjoh and the rest of your teammates on Graphite

ijjk · 2024-08-25T18:21:25Z

Failing test suites

Commit: 253119d

pnpm test-start test/e2e/app-dir/ppr-full/ppr-full.test.ts

ppr-full > Prefetch RSC Response > for /dynamic/force-static > should have correct headers
ppr-full > Prefetch RSC Response > for /loading/a > should have correct headers
ppr-full > Prefetch RSC Response > for /metadata > should have correct headers
ppr-full > Prefetch RSC Response > for /nested/a > should have correct headers

Expand output

● ppr-full › Prefetch RSC Response › for /nested/a › should have correct headers

expect(received).toEqual(expected) // deep equality

Expected: "HIT"
Received: "STALE"

  563 |
  564 |           if (!isNextDeploy) {
> 565 |             expect(res.headers.get('x-nextjs-cache')).toEqual('HIT')
      |                                                       ^
  566 |           } else {
  567 |             expect(res.headers.get('x-nextjs-cache')).toEqual(null)
  568 |           }

  at Object.toEqual (e2e/app-dir/ppr-full/ppr-full.test.ts:565:55)

● ppr-full › Prefetch RSC Response › for /metadata › should have correct headers

expect(received).toEqual(expected) // deep equality

Expected: "HIT"
Received: "STALE"

  563 |
  564 |           if (!isNextDeploy) {
> 565 |             expect(res.headers.get('x-nextjs-cache')).toEqual('HIT')
      |                                                       ^
  566 |           } else {
  567 |             expect(res.headers.get('x-nextjs-cache')).toEqual(null)
  568 |           }

  at Object.toEqual (e2e/app-dir/ppr-full/ppr-full.test.ts:565:55)

● ppr-full › Prefetch RSC Response › for /loading/a › should have correct headers

expect(received).toEqual(expected) // deep equality

Expected: "HIT"
Received: "STALE"

  563 |
  564 |           if (!isNextDeploy) {
> 565 |             expect(res.headers.get('x-nextjs-cache')).toEqual('HIT')
      |                                                       ^
  566 |           } else {
  567 |             expect(res.headers.get('x-nextjs-cache')).toEqual(null)
  568 |           }

  at Object.toEqual (e2e/app-dir/ppr-full/ppr-full.test.ts:565:55)

● ppr-full › Prefetch RSC Response › for /dynamic/force-static › should have correct headers

expect(received).toEqual(expected) // deep equality

Expected: "HIT"
Received: "STALE"

  563 |
  564 |           if (!isNextDeploy) {
> 565 |             expect(res.headers.get('x-nextjs-cache')).toEqual('HIT')
      |                                                       ^
  566 |           } else {
  567 |             expect(res.headers.get('x-nextjs-cache')).toEqual(null)
  568 |           }

  at Object.toEqual (e2e/app-dir/ppr-full/ppr-full.test.ts:565:55)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-08-25T18:25:51Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
buildDuration	18.2s	15.6s	N/A
buildDurationCached	8.4s	7.2s	N/A
nodeModulesSize	355 MB	356 MB	⚠️ +648 kB
nextStartRea..uration (ms)	427ms	433ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
2994-HASH.js gzip	37.8 kB	41.9 kB	⚠️ +4.09 kB
3095.HASH.js gzip	169 B	169 B	✓
9630-HASH.js gzip	5.25 kB	5.25 kB	N/A
a8273233-HASH.js gzip	51.9 kB	51.9 kB	N/A
framework-HASH.js gzip	56.7 kB	56.7 kB	N/A
main-app-HASH.js gzip	226 B	224 B	N/A
main-HASH.js gzip	32.5 kB	32.5 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	37.9 kB	42 kB	⚠️ +4.09 kB

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	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/pfpr-dynamic-shell	Change
_app-HASH.js gzip	194 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	508 B	511 B	N/A
css-HASH.js gzip	344 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	364 B	364 B	✓
hooks-HASH.js gzip	390 B	390 B	✓
image-HASH.js gzip	4.4 kB	4.4 kB	N/A
index-HASH.js gzip	267 B	268 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	397 B	396 B	N/A
withRouter-HASH.js gzip	323 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.38 kB	1.38 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
_buildManifest.js gzip	750 B	748 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
index.html gzip	522 B	522 B	✓
link.html gzip	538 B	536 B	N/A
withRouter.html gzip	519 B	517 B	N/A
Overall change	522 B	522 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
edge-ssr.js gzip	127 kB	128 kB	⚠️ +493 B
page.js gzip	173 kB	176 kB	⚠️ +2.84 kB
Overall change	301 kB	304 kB	⚠️ +3.33 kB

Middleware size

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
middleware-b..fest.js gzip	668 B	673 B	N/A
middleware-r..fest.js gzip	156 B	156 B	✓
middleware.js gzip	29.9 kB	29.9 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	1 kB	1 kB	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
928-experime...dev.js gzip	322 B	322 B	✓
928.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	312 kB	313 kB	⚠️ +1.17 kB
app-page-exp..prod.js gzip	123 kB	123 kB	⚠️ +675 B
app-page-tur..prod.js gzip	136 kB	137 kB	⚠️ +683 B
app-page-tur..prod.js gzip	131 kB	132 kB	⚠️ +700 B
app-page.run...dev.js gzip	301 kB	302 kB	⚠️ +1.16 kB
app-page.run..prod.js gzip	118 kB	119 kB	⚠️ +694 B
app-route-ex...dev.js gzip	30.8 kB	30.8 kB	N/A
app-route-ex..prod.js gzip	20.8 kB	20.8 kB	N/A
app-route-tu..prod.js gzip	20.8 kB	20.8 kB	N/A
app-route-tu..prod.js gzip	20.6 kB	20.7 kB	N/A
app-route.ru...dev.js gzip	32.4 kB	32.5 kB	N/A
app-route.ru..prod.js gzip	20.6 kB	20.7 kB	N/A
pages-api-tu..prod.js gzip	9.62 kB	9.62 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.8 kB	20.8 kB	✓
pages.runtim...dev.js gzip	26.4 kB	26.4 kB	✓
pages.runtim..prod.js gzip	20.8 kB	20.8 kB	✓
server.runti..prod.js gzip	56.8 kB	57.7 kB	⚠️ +882 B
Overall change	1.28 MB	1.28 MB	⚠️ +5.96 kB

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat/pfpr-dynamic-shell	Change
0.pack gzip	1.49 MB	1.56 MB	⚠️ +71.2 kB
index.pack gzip	127 kB	130 kB	⚠️ +3.21 kB
Overall change	1.62 MB	1.69 MB	⚠️ +74.4 kB

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],
   {
-    /***/ 6682: /***/ (
+    /***/ 8480: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(1471);
+          return __webpack_require__(3908);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2968: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9178: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(5550)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9973)
+        __webpack_require__(7261)
       );
-      const _getimgprops = __webpack_require__(3971);
-      const _imageconfig = __webpack_require__(985);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7496);
-      const _warnonce = __webpack_require__(9125);
-      const _routercontextsharedruntime = __webpack_require__(9390);
+      const _getimgprops = __webpack_require__(5184);
+      const _imageconfig = __webpack_require__(5055);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9427);
+      const _warnonce = __webpack_require__(3435);
+      const _routercontextsharedruntime = __webpack_require__(3626);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(855)
+        __webpack_require__(7510)
       );
-      const _usemergedref = __webpack_require__(752);
+      const _usemergedref = __webpack_require__(3782);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 752: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3782: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 3971: /***/ (
+    /***/ 5184: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(9125);
-      const _imageblursvg = __webpack_require__(5602);
-      const _imageconfig = __webpack_require__(985);
+      const _warnonce = __webpack_require__(3435);
+      const _imageblursvg = __webpack_require__(2564);
+      const _imageconfig = __webpack_require__(5055);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 5602: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2564: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,7 @@
       /***/
     },
 
-    /***/ 1585: /***/ (
+    /***/ 1146: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(3971);
-      const _imagecomponent = __webpack_require__(2968);
+      const _getimgprops = __webpack_require__(5184);
+      const _imagecomponent = __webpack_require__(9178);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(855)
+        __webpack_require__(7510)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 855: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7510: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 1471: /***/ (
+    /***/ 3908: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-eb3ad065-20240822/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(3801);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-eb3ad065-20240822_re_ixk2rr5gnwbjcqqikyozc23shi/node_modules/next/image.js
-      var next_image = __webpack_require__(7764);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-eb3ad065-20240822_re_73fog5rwwduhvoesnuzrxcpoki/node_modules/next/image.js
+      var next_image = __webpack_require__(101);
       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",
@@ -1030,12 +1030,12 @@
       /***/
     },
 
-    /***/ 7764: /***/ (
+    /***/ 101: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1585);
+      module.exports = __webpack_require__(1146);
 
       /***/
     },
@@ -1045,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(6682)
+      __webpack_exec__(8480)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2994-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

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: 31bb9a6

…anifest, improved serialization speed

…d comments, remove server code from client bundles

…arsing, updated serialization format

ijjk added created-by: Next.js team PRs by the Next.js team. tests type: next labels Aug 25, 2024

This was referenced Aug 25, 2024

refactor: incremental cache cleanup #68602

Merged

refactor: update fallbacks to use response cache #68603

Merged

refactor: fallback updates #68631

Merged

Partial Fallback Prerendering #68958

Merged

wyattjoh force-pushed the feat/pfpr branch from 4f72a86 to 291ab2a Compare August 26, 2024 16:39

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 59c1b2d to 5d049f9 Compare August 26, 2024 16:39

wyattjoh force-pushed the feat/pfpr branch from 291ab2a to fea7e6b Compare August 26, 2024 17:45

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 5d049f9 to 9049d53 Compare August 26, 2024 18:41

wyattjoh force-pushed the feat/pfpr branch from fea7e6b to 5ab0dda Compare August 26, 2024 21:03

wyattjoh mentioned this pull request Aug 27, 2024

feat: updated postponed state serialization #69378

Closed

wyattjoh force-pushed the feat/pfpr branch from 578bdc9 to 2a92162 Compare August 27, 2024 17:08

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 9049d53 to 4f5e298 Compare August 27, 2024 17:08

wyattjoh force-pushed the feat/pfpr branch from 2a92162 to 973bf66 Compare August 27, 2024 17:31

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch 3 times, most recently from b74c79f to 8e67a5d Compare August 27, 2024 19:47

wyattjoh force-pushed the feat/pfpr branch from 3185727 to d843d22 Compare August 27, 2024 20:11

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 8e67a5d to 1c4a4de Compare August 27, 2024 20:11

wyattjoh force-pushed the feat/pfpr branch from d843d22 to 0c807f4 Compare August 27, 2024 20:32

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 1c4a4de to 1e94b94 Compare August 27, 2024 20:32

wyattjoh force-pushed the feat/pfpr branch from 0c807f4 to 65df974 Compare August 27, 2024 21:06

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 1e94b94 to 951aa51 Compare August 27, 2024 21:06

wyattjoh force-pushed the feat/pfpr branch from 65df974 to 8bcc38e Compare August 27, 2024 21:58

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 951aa51 to b7ab535 Compare August 27, 2024 21:58

wyattjoh force-pushed the feat/pfpr branch from 8bcc38e to 01b0828 Compare August 27, 2024 22:28

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from b7ab535 to d6b7725 Compare August 27, 2024 22:28

wyattjoh mentioned this pull request Aug 27, 2024

fix: fix the safari and firefox test modes #69384

Merged

wyattjoh force-pushed the feat/pfpr branch 2 times, most recently from aaf186c to 7a13005 Compare August 27, 2024 22:36

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from d6b7725 to d478afe Compare August 27, 2024 22:36

wyattjoh force-pushed the feat/pfpr branch from 7a13005 to d6bb4e9 Compare August 27, 2024 22:37

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch 4 times, most recently from 80822db to 31bb9a6 Compare August 27, 2024 22:53

wyattjoh added 15 commits August 27, 2024 17:36

feat: added support for Partial Fallback Prerendering

4ac7656

refactor: modify postponed state instead of serverside patching

0604a2c

feat: support partial dynamic path parameters

4377696

fix: trap metadata access

a36cf98

feat: added new experimental.pprFallbacks option for enabling PFPR

86011b7

refactor: change the key for pfpr

90e5a8e

refactor: break fallback handling into separate branches

da03262

fix: test updates

32cf758

fix: increase test module size limit

85ac7fa

fix: remove component importing:

60b84b8

refactor: cleanup impl, simplified logic, added fields to prerender m…

63a7cd9

…anifest, improved serialization speed

review: updated prop assignments, removed unneeded type assertions an…

1e7e090

…d comments, remove server code from client bundles

test: add tests for HTML and data postponed state serialization and p…

99b2136

…arsing, updated serialization format

fix: don't use params from props as it's uninitialized

eca0344

feat: added Partial Fallback Prerendering Dynamic Shell Generation

253119d

wyattjoh force-pushed the feat/pfpr branch from d6bb4e9 to eca0344 Compare August 27, 2024 23:36

wyattjoh force-pushed the feat/pfpr-dynamic-shell branch from 31bb9a6 to 253119d Compare August 27, 2024 23:36

Base automatically changed from feat/pfpr to canary August 28, 2024 05:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Partial Fallback Prerendering Dynamic Shells #69282

Partial Fallback Prerendering Dynamic Shells #69282

wyattjoh commented Aug 25, 2024

wyattjoh commented Aug 25, 2024 •

edited

Loading

ijjk commented Aug 25, 2024 •

edited

Loading

ijjk commented Aug 25, 2024 •

edited

Loading

Partial Fallback Prerendering Dynamic Shells #69282

Are you sure you want to change the base?

Partial Fallback Prerendering Dynamic Shells #69282

Conversation

wyattjoh commented Aug 25, 2024

wyattjoh commented Aug 25, 2024 • edited Loading

ijjk commented Aug 25, 2024 • edited Loading

Failing test suites

ijjk commented Aug 25, 2024 • edited Loading

Stats from current PR

wyattjoh commented Aug 25, 2024 •

edited

Loading

ijjk commented Aug 25, 2024 •

edited

Loading

ijjk commented Aug 25, 2024 •

edited

Loading