Add CacheNode.prefetchRsc field #59537

acdlite · 2023-12-12T16:23:32Z

Adds a new field prefetchRsc to CacheNode that will be used by the PPR implementation. It represents a static version of the segment that can be showed immediately, and may or may not contain dynamic holes. It's prefetched before a navigation occurs. During rendering, we will choose whether to render rsc or prefetchRsc with useDeferredValue.

As with the rsc field, a value of null means no value was provided. In this case, the LayoutRouter will go straight to rendering the rsc value; if that one is also missing, it will suspend and trigger a lazy fetch.

The non-PPR implementation will never set this value.

This PR adds the field to the CacheNode type but doesn't implement any of the behavior yet. Mostly this involves updating the router reducer unit tests.

Closes NEXT-1855

acdlite · 2023-12-12T16:24:19Z

packages/next/src/shared/lib/app-router-context.shared-runtime.ts

@@ -31,8 +31,7 @@ export type LazyCacheNode = {
   */
  rsc: null

-  // TODO: Add prefetchRsc field.
-  // prefetchRsc: null
+  prefetchRsc: React.ReactNode


This type ended up allowing for non-null values because it could have been cloned from a previous CacheNode entry.

added a comment with more explanation

ijjk · 2023-12-12T16:25:34Z

Failing test suites

Commit: 5c23cd3

pnpm test packages/next/src/client/components/router-reducer/fill-cache-with-data-property.test.tsx

fillCacheWithDataProperty > should add data property

Expand output

● fillCacheWithDataProperty › should add data property

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `fillCacheWithDataProperty should add data property 1`

- Snapshot  - 0
+ Received  + 4

@@ -7,24 +7,28 @@
          "parallelRoutes": Map {
            "children" => Map {
              "" => {
                "lazyData": null,
                "parallelRoutes": Map {},
+               "prefetchRsc": null,
                "rsc": <React.Fragment>
                  Page
                </React.Fragment>,
              },
            },
          },
+         "prefetchRsc": null,
          "rsc": <React.Fragment>
            Linking
          </React.Fragment>,
        },
        "dashboard" => {
          "lazyData": Promise {},
          "parallelRoutes": Map {},
+         "prefetchRsc": null,
          "rsc": null,
        },
      },
    },
+   "prefetchRsc": null,
    "rsc": null,
  }

  69 |     )
  70 |
> 71 |     expect(cache).toMatchInlineSnapshot(`
     |                   ^
  72 |       {
  73 |         "lazyData": null,
  74 |         "parallelRoutes": Map {

  at Object.toMatchInlineSnapshot (../packages/next/src/client/components/router-reducer/fill-cache-with-data-property.test.tsx:71:19)

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

ijjk · 2023-12-12T16:25:35Z

Tests Passed

ijjk · 2023-12-12T16:40:59Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
buildDuration	11s	10.9s	N/A
buildDurationCached	6.1s	6s	N/A
nodeModulesSize	200 MB	200 MB	⚠️ +14.8 kB
nextStartRea..uration (ms)	430ms	428ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
170-HASH.js gzip	26.7 kB	26.7 kB	N/A
199.HASH.js gzip	181 B	185 B	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	240 B	241 B	N/A
main-HASH.js gzip	31.7 kB	31.6 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	98.5 kB	98.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
_app-HASH.js gzip	195 B	194 B	N/A
_error-HASH.js gzip	183 B	182 B	N/A
amp-HASH.js gzip	501 B	501 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	255 B	✓
head-HASH.js gzip	349 B	350 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.6 kB	N/A
routerDirect..HASH.js gzip	311 B	309 B	N/A
script-HASH.js gzip	384 B	384 B	✓
withRouter-HASH.js gzip	307 B	306 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.57 kB	1.57 kB	✓

Client Build Manifests

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
_buildManifest.js gzip	484 B	482 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
index.html gzip	530 B	527 B	N/A
link.html gzip	542 B	540 B	N/A
withRouter.html gzip	524 B	524 B	✓
Overall change	524 B	524 B	✓

Edge SSR bundle Size

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
edge-ssr.js gzip	93.7 kB	93.7 kB	N/A
page.js gzip	146 kB	146 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
middleware-b..fest.js gzip	626 B	624 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.4 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.07 kB	2.07 kB	✓

Next Runtimes

	vercel/next.js canary	acdlite/next.js add-cachenode.prefetchrsc	Change
app-page-exp...dev.js gzip	168 kB	168 kB	✓
app-page-exp..prod.js gzip	93.9 kB	93.9 kB	✓
app-page-tur..prod.js gzip	94.7 kB	94.7 kB	✓
app-page-tur..prod.js gzip	89.2 kB	89.2 kB	✓
app-page.run...dev.js gzip	138 kB	138 kB	✓
app-page.run..prod.js gzip	88.5 kB	88.5 kB	✓
app-route-ex...dev.js gzip	23.9 kB	23.9 kB	✓
app-route-ex..prod.js gzip	16.6 kB	16.6 kB	✓
app-route-tu..prod.js gzip	16.6 kB	16.6 kB	✓
app-route-tu..prod.js gzip	16.2 kB	16.2 kB	✓
app-route.ru...dev.js gzip	23.4 kB	23.4 kB	✓
app-route.ru..prod.js gzip	16.2 kB	16.2 kB	✓
pages-api-tu..prod.js gzip	9.37 kB	9.37 kB	✓
pages-api.ru...dev.js gzip	9.64 kB	9.64 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.5 kB	22.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	929 kB	929 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for 170-HASH.js

Diff too large to display

Commit: 99f766f

ztanner · 2023-12-12T17:26:32Z

packages/next/src/shared/lib/app-router-context.shared-runtime.ts

-  // TODO: Add prefetchRsc field.
-  // prefetchRsc: React.ReactNode
+  /**
+   * Represents a static version of the segment that can be showed immediately,


Suggested change

* Represents a static version of the segment that can be showed immediately,

* Represents a static version of the segment that can be shown immediately,

Adds a new field `prefetchRsc` to CacheNode that will be used by the PPR implementation. It represents a static version of the segment that can be showed immediately, and may or may not contain dynamic holes. It's prefetched before a navigation occurs. During rendering, we will choose whether to render `rsc` or `prefetchRsc` with `useDeferredValue`. As with the `rsc` field, a value of `null` means no value was provided. In this case, the LayoutRouter will go straight to rendering the `rsc` value; if that one is also missing, it will suspend and trigger a lazy fetch. The non-PPR implementation will never set this value. This PR adds the field to the CacheNode type but doesn't implement any of the behavior yet. Mostly this involves updating the router reducer unit tests.

ijjk added created-by: Next.js team type: next labels Dec 12, 2023

acdlite commented Dec 12, 2023

View reviewed changes

acdlite force-pushed the add-cachenode.prefetchrsc branch 2 times, most recently from a785b11 to 99f766f Compare December 12, 2023 16:31

acdlite marked this pull request as ready for review December 12, 2023 16:40

acdlite requested review from timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners December 12, 2023 16:40

acdlite mentioned this pull request Dec 12, 2023

Fork navigateReducer into PPR and non-PPR versions #59538

Merged

ztanner approved these changes Dec 12, 2023

View reviewed changes

acdlite force-pushed the add-cachenode.prefetchrsc branch from 99f766f to e87848f Compare December 12, 2023 18:27

acdlite merged commit 5adacb6 into vercel:canary Dec 12, 2023

github-actions bot added the locked label Dec 27, 2023

github-actions bot locked as resolved and limited conversation to collaborators Dec 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CacheNode.prefetchRsc field #59537

Add CacheNode.prefetchRsc field #59537

acdlite commented Dec 12, 2023 •

edited by padmaia

Loading

acdlite Dec 12, 2023

acdlite Dec 12, 2023

ijjk commented Dec 12, 2023

ijjk commented Dec 12, 2023 •

edited

Loading

ijjk commented Dec 12, 2023

ztanner Dec 12, 2023

	* Represents a static version of the segment that can be showed immediately,
	* Represents a static version of the segment that can be shown immediately,

Add CacheNode.prefetchRsc field #59537

Add CacheNode.prefetchRsc field #59537

Conversation

acdlite commented Dec 12, 2023 • edited by padmaia Loading

acdlite Dec 12, 2023

Choose a reason for hiding this comment

acdlite Dec 12, 2023

Choose a reason for hiding this comment

ijjk commented Dec 12, 2023

Failing test suites

ijjk commented Dec 12, 2023 • edited Loading

Tests Passed

ijjk commented Dec 12, 2023

Stats from current PR

ztanner Dec 12, 2023

Choose a reason for hiding this comment

acdlite commented Dec 12, 2023 •

edited by padmaia

Loading

ijjk commented Dec 12, 2023 •

edited

Loading