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

feat: added support for prefetch segments when deployed #75202

Draft
wants to merge 4 commits into
base: canary
Choose a base branch
from

Conversation

wyattjoh
Copy link
Member

@wyattjoh wyattjoh commented Jan 22, 2025

Designed to enable the client prefetch segments feature when deployed on Vercel, this adds additional fields and data to the manifests to allow the CLI to create the rewrite rules needed to serve the prefetch segments. The fallback routes also now emit their RSC data to disk even though only their filenames are used.

We emit the routes for the prefetches using backreferences. For example, for the route:

/blog/[...slug].segments/$c$slug$[...slug]/__PAGE__.segment.rsc

We create the following Regular Expression:

/^\/blog\/(?<nxtPslug>.+?)\.segments\/\$c\$slug\$\k<nxtPslug>\/__PAGE__\.segment\.rsc$/

Which enforces that the named capture group nxtPslug is the same for both the [...slug].segments and the $c$slug$[...slug]:

Matching:
/blog/my-post.segments/$c$slug$my-post/__PAGE__.segment.rsc
/blog/hello-world.segments/$c$slug$hello-world/__PAGE__.segment.rsc
/blog/2024-01.segments/$c$slug$2024-01/__PAGE__.segment.rsc

Not Matching
/blog/post-1.segments/$c$slug$post-2/__PAGE__.segment.rsc

This also fixed a bug where the client segment prefetch keys included double //.

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 22, 2025
Copy link
Member Author

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

@wyattjoh wyattjoh force-pushed the feat/deploy-prefetch-segments branch from 6d5a363 to 2ca8292 Compare January 22, 2025 20:30
@ijjk
Copy link
Member

ijjk commented Jan 22, 2025

Failing test suites

Commit: b50aa7e

pnpm test-start-turbo test/e2e/app-dir/segment-cache/incremental-opt-in/segment-cache-incremental-opt-in.test.ts (turbopack)

  • segment cache (incremental opt in) > when prefetching with prefetch=true, refetches partial cache entries even if there's already a pending PPR request
Expand output

● segment cache (incremental opt in) › when prefetching with prefetch=true, refetches partial cache entries even if there's already a pending PPR request

Expected a response containing the given string:

Loading (has-loading-boundary/loading.tsx)...

  247 |       // include the /shared-layout/ segment, because it's inside the
  248 |       // loading boundary.
> 249 |       await act(
      |             ^
  250 |         async () => {
  251 |           const checkbox = await browser.elementById('ppr-disabled')
  252 |           await checkbox.click()

  at Object.act (e2e/app-dir/segment-cache/incremental-opt-in/segment-cache-incremental-opt-in.test.ts:249:13)

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

pnpm test test/integration/custom-routes/test/index.test.js (turbopack)

  • Custom routes > production mode > should output routes-manifest successfully
Expand output

● Custom routes › production mode › should output routes-manifest successfully

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

- Expected  - 0
+ Received  + 3

@@ -927,10 +927,13 @@
    "rsc": Object {
      "contentTypeHeader": "text/x-component",
      "didPostponeHeader": "x-nextjs-postponed",
      "header": "RSC",
      "prefetchHeader": "Next-Router-Prefetch",
+     "prefetchSegmentDirSuffix": ".segments",
+     "prefetchSegmentHeader": "Next-Router-Segment-Prefetch",
+     "prefetchSegmentSuffix": ".segment.rsc",
      "prefetchSuffix": ".prefetch.rsc",
      "suffix": ".rsc",
      "varyHeader": "RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch",
    },
    "staticRoutes": Array [

  1496 |       }
  1497 |
> 1498 |       expect(manifest).toEqual({
       |                        ^
  1499 |         version: 3,
  1500 |         pages404: true,
  1501 |         caseSensitive: true,

  at Object.toEqual (integration/custom-routes/test/index.test.js:1498:24)

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

@ijjk
Copy link
Member

ijjk commented Jan 22, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
buildDuration 17.6s 15.1s N/A
buildDurationCached 14.2s 12s N/A
nodeModulesSize 419 MB 419 MB ⚠️ +117 kB
nextStartRea..uration (ms) 418ms 413ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
5306-HASH.js gzip 54 kB 54 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.46 kB 5.46 kB N/A
bccd1874-HASH.js gzip 52.9 kB 52.9 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 241 B 241 B
main-HASH.js gzip 34.6 kB 34.7 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 241 B 241 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.59 kB 4.58 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.35 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
_buildManifest.js gzip 748 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
index.html gzip 524 B 524 B
link.html gzip 539 B 539 B
withRouter.html gzip 520 B 521 B N/A
Overall change 1.06 kB 1.06 kB
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
edge-ssr.js gzip 129 kB 130 kB ⚠️ +356 B
page.js gzip 209 kB 209 kB ⚠️ +281 B
Overall change 338 kB 339 kB ⚠️ +637 B
Middleware size
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
middleware-b..fest.js gzip 670 B 668 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.3 kB 31.3 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes Overall increase ⚠️
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 376 kB 376 kB N/A
app-page-exp..prod.js gzip 131 kB 131 kB N/A
app-page-tur..prod.js gzip 144 kB 144 kB N/A
app-page-tur..prod.js gzip 140 kB 140 kB N/A
app-page.run...dev.js gzip 364 kB 364 kB N/A
app-page.run..prod.js gzip 127 kB 127 kB N/A
app-route-ex...dev.js gzip 37.6 kB 37.6 kB
app-route-ex..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.4 kB 25.4 kB
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.9 kB 21.9 kB N/A
pages.runtim...dev.js gzip 27.7 kB 27.7 kB N/A
pages.runtim..prod.js gzip 21.9 kB 21.9 kB N/A
server.runti..prod.js gzip 916 kB 916 kB ⚠️ +340 B
Overall change 1.13 MB 1.13 MB ⚠️ +340 B
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js feat/deploy-prefetch-segments Change
0.pack gzip 2.1 MB 2.1 MB ⚠️ +2.7 kB
index.pack gzip 75.1 kB 74.6 kB N/A
Overall change 2.1 MB 2.1 MB ⚠️ +2.7 kB
Diff details
Diff for edge-ssr.js

Diff too large to display

Diff for 5306-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

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 pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: b50aa7e

@ijjk ijjk added the tests label Jan 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants