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

perf: improve Pages Router server rendering performance #64461

Merged
merged 5 commits into from Apr 16, 2024

Conversation

feedthejim
Copy link
Contributor

@feedthejim feedthejim commented Apr 14, 2024

What

This PR's goal is to improve the throughput performance of the Next.js server when handling Pages Router routes.

Note that the results from this are very synthetic and do not represent the real-life performance of an application. If we only wanted to handle hello worlds, we could probably make this even faster but on production, a slow fetch call to your DB is probably what's slowing you down.

I'll look into App Router next.

Why?

I guess I got nerd-sniped into it 😃

How?

A few optimizations:

  • I looked deeply at the pipeline for rendering a Pages Router page. I noticed a lot of intermediary streams being created here and there to eventually be concatenated to a simple string. I think this is probably left over code from when we wanted to support streaming there and so there's some code that was shared with the App Router, which we absolutely don't need I think. I refactored it to be slightly simpler with just a few string concats here and there.
  • misc: I removed some redundant Promises being created here and there and added a small inline optimisation to eliminate if (renderOpts.dev) code in production.

Nummies

Test setup: hello world pages router app, next start + autocannon

  • requests handled in 10s: 18k -> 33K, ~80% improvement
  • avg latency: 4.89ms -> 2.8ms, ~42% improvement
  • avg req/res: 1846.5 -> 2983.5, ~61% improvement

Before

image

vs

after

image

Also ran on the other benchmark by @eknkc. Still can do better!

Before:
image
After:
image

Closes NEXT-3103

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Apr 14, 2024
@feedthejim feedthejim changed the title add stuff perf: improve pages router rendering pipeline Apr 14, 2024
@ijjk
Copy link
Member

ijjk commented Apr 14, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Apr 14, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
buildDuration 16s 16.1s N/A
buildDurationCached 8.8s 7.4s N/A
nodeModulesSize 199 MB 199 MB N/A
nextStartRea..uration (ms) 432ms 436ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
2453-HASH.js gzip 31.4 kB 31.4 kB N/A
3304.HASH.js gzip 181 B 181 B
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB
8299-HASH.js gzip 5.1 kB 5.1 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 242 B 240 B N/A
main-HASH.js gzip 29.6 kB 29.7 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 99 kB 99 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
_app-HASH.js gzip 196 B 197 B N/A
_error-HASH.js gzip 184 B 184 B
amp-HASH.js gzip 505 B 505 B
css-HASH.js gzip 324 B 325 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 258 B 258 B
head-HASH.js gzip 352 B 352 B
hooks-HASH.js gzip 370 B 371 B N/A
image-HASH.js gzip 4.27 kB 4.27 kB
index-HASH.js gzip 259 B 259 B
link-HASH.js gzip 2.67 kB 2.67 kB N/A
routerDirect..HASH.js gzip 314 B 312 B N/A
script-HASH.js gzip 386 B 386 B
withRouter-HASH.js gzip 309 B 309 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 6.63 kB 6.63 kB
Client Build Manifests
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
_buildManifest.js gzip 483 B 485 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
index.html gzip 529 B 529 B
link.html gzip 542 B 542 B
withRouter.html gzip 524 B 524 B
Overall change 1.59 kB 1.59 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
edge-ssr.js gzip 95.5 kB 94.4 kB N/A
page.js gzip 3.05 kB 3.05 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
middleware-b..fest.js gzip 623 B 625 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 839 B 839 B
Next Runtimes
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 97.5 kB 97.5 kB
app-page-tur..prod.js gzip 99.2 kB 99.2 kB
app-page-tur..prod.js gzip 93.5 kB 93.5 kB
app-page.run...dev.js gzip 145 kB 145 kB
app-page.run..prod.js gzip 92 kB 92 kB
app-route-ex...dev.js gzip 21.5 kB 21.5 kB
app-route-ex..prod.js gzip 15.2 kB 15.2 kB
app-route-tu..prod.js gzip 15.2 kB 15.2 kB
app-route-tu..prod.js gzip 14.9 kB 14.9 kB
app-route.ru...dev.js gzip 21.1 kB 21.1 kB
app-route.ru..prod.js gzip 14.9 kB 14.9 kB
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB
pages-turbo...prod.js gzip 22.5 kB 21.4 kB N/A
pages.runtim...dev.js gzip 23.1 kB 22.1 kB N/A
pages.runtim..prod.js gzip 22.5 kB 21.4 kB N/A
server.runti..prod.js gzip 51.5 kB 51.5 kB N/A
Overall change 829 kB 829 kB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js feedthejim/pages-render-optimisations Change
0.pack gzip 1.59 MB 1.59 MB N/A
index.pack gzip 106 kB 107 kB ⚠️ +485 B
Overall change 106 kB 107 kB ⚠️ +485 B
Diff details
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.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: e376f18

@feedthejim feedthejim marked this pull request as ready for review April 14, 2024 10:15
@feedthejim feedthejim changed the title perf: improve pages router rendering pipeline perf: improve Pages Router server rendering performance Apr 14, 2024
await documentResult.bodyResult(renderTargetSuffix)
)
)
const content = prefix + documentResult.contentHTML + renderTargetSuffix
Copy link
Member

Choose a reason for hiding this comment

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

Makes sense!

@feedthejim feedthejim enabled auto-merge (squash) April 14, 2024 10:22
test/unit/isolated/require-page.test.ts Outdated Show resolved Hide resolved
@@ -177,6 +177,7 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
'this.serverOptions.experimentalTestProxy': JSON.stringify(false),
'this.minimalMode': JSON.stringify(true),
'this.renderOpts.dev': JSON.stringify(dev),
'renderOpts.dev': JSON.stringify(dev),
Copy link
Member

Choose a reason for hiding this comment

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

This is a bit weird, similarly the this.serverOptions.experimentalTestProxy and this.minimalMode / this.renderOpts.dev are weird too, maybe these should be changed to process.env.NEXT_INTERNAL_X instead, not required for this PR though.

@feedthejim feedthejim dismissed wyattjoh’s stale review April 16, 2024 12:25

addressed changes

@feedthejim feedthejim merged commit d52d32f into canary Apr 16, 2024
79 checks passed
@feedthejim feedthejim deleted the feedthejim/pages-render-optimisations branch April 16, 2024 12:25
@github-actions github-actions bot added the locked label May 1, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants