"Next.js is my main web server for all APIs. And I like it!" presentation

👋 This is home for "Next.js is my main web server for all APIs. And I like it!" presentation, code examples and benchmark I did.

🖥️ Presentation

• Embedded on the page - click
• On slides.com

💾 Apps

apps contain monorepo with few apps which I've created while working on this presentation.

I also used them for the benchmark the Next.js as web-server performance 😊

To run all of them:

pnpm i
pnpm start

They will run respectively on ports:

• nextjs-raw-api-handlers: 3009
• nextjs-raw-route-handlers: 3010
• next-connect-usage: 3011
• nextjs-request-pattern-matching: 3012
• fastify-example: 3013

---

⚡️ Benchmarks

Benchmarks were made with AutoCannon with the following params:

• -c 100 - 100 concurrent connections
• -d 40 - 40 seconds duration
• -p 10 - 10 pipelining factor (the number of pipelined requests for each connection. So sending multiple requests at the same time without waiting for the response.)

It tested GET /api/posts route with simple auth based on JWT.

• Auth middleware code was same for each project.
• Same JWT token was used for each benchmark.

npx autocannon -c 100 -d 40 -p 10 <SERVICE_URL>/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"

Just run it via npm script

pnpm benchmark <SERVICE_URL>/api/posts

💻 Machine

All tests were made on the same machine:

• CPU: Apple M1
• RAM: 16 GB
• macOS: Ventura 13.4
• node.js: v20.10.0

📊 Nextjs with App Router + Route Handlers

• using app and route handlers

➜  benchmarks git:(master) ✗ npx autocannon -c 100 -d 40 -p 10 localhost:3010/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"

Running 40s test @ http://localhost:3010/api/posts
100 connections with 10 pipelining factor

┌─────────┬────────┬────────┬────────┬────────┬───────────┬───────────┬─────────┐
│ Stat    │ 2.5%   │ 50%    │ 97.5%  │ 99%    │ Avg       │ Stdev     │ Max     │
├─────────┼────────┼────────┼────────┼────────┼───────────┼───────────┼─────────┤
│ Latency │ 349 ms │ 425 ms │ 892 ms │ 908 ms │ 532.85 ms │ 503.32 ms │ 9897 ms │
└─────────┴────────┴────────┴────────┴────────┴───────────┴───────────┴─────────┘
┌───────────┬─────────┬─────────┬─────────┬─────────┬─────────┬────────┬─────────┐
│ Stat      │ 1%      │ 2.5%    │ 50%     │ 97.5%   │ Avg     │ Stdev  │ Min     │
├───────────┼─────────┼─────────┼─────────┼─────────┼─────────┼────────┼─────────┤
│ Req/Sec   │ 765     │ 765     │ 1,696   │ 1,980   │ 1,733.4 │ 199.38 │ 765     │
├───────────┼─────────┼─────────┼─────────┼─────────┼─────────┼────────┼─────────┤
│ Bytes/Sec │ 2.97 MB │ 2.97 MB │ 6.57 MB │ 7.68 MB │ 6.72 MB │ 773 kB │ 2.96 MB │
└───────────┴─────────┴─────────┴─────────┴─────────┴─────────┴────────┴─────────┘

Req/Bytes counts sampled once per second.
# of samples: 40

71k requests in 40.03s, 269 MB read
270 errors (270 timeouts)

📊 Nextjs with App Router + Route Handlers + next-connect app

• using app and route handlers
• wrap route handlers with next-connect

➜  benchmarks git:(master) ✗ npx autocannon -c 100 -d 40 -p 10 localhost:3011/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"

Running 40s test @ http://localhost:3011/api/posts
100 connections with 10 pipelining factor

┌─────────┬────────┬────────┬────────┬────────┬───────────┬───────────┬─────────┐
│ Stat    │ 2.5%   │ 50%    │ 97.5%  │ 99%    │ Avg       │ Stdev     │ Max     │
├─────────┼────────┼────────┼────────┼────────┼───────────┼───────────┼─────────┤
│ Latency │ 443 ms │ 491 ms │ 990 ms │ 995 ms │ 565.78 ms │ 353.31 ms │ 9927 ms │
└─────────┴────────┴────────┴────────┴────────┴───────────┴───────────┴─────────┘
┌───────────┬─────────┬─────────┬─────────┬─────────┬──────────┬────────┬─────────┐
│ Stat      │ 1%      │ 2.5%    │ 50%     │ 97.5%   │ Avg      │ Stdev  │ Min     │
├───────────┼─────────┼─────────┼─────────┼─────────┼──────────┼────────┼─────────┤
│ Req/Sec   │ 760     │ 760     │ 1,750   │ 1,815   │ 1,726.85 │ 165.77 │ 760     │
├───────────┼─────────┼─────────┼─────────┼─────────┼──────────┼────────┼─────────┤
│ Bytes/Sec │ 2.95 MB │ 2.95 MB │ 6.78 MB │ 7.04 MB │ 6.69 MB  │ 643 kB │ 2.94 MB │
└───────────┴─────────┴─────────┴─────────┴─────────┴──────────┴────────┴─────────┘

Req/Bytes counts sampled once per second.
# of samples: 40

70k requests in 40.04s, 268 MB read
50 errors (50 timeouts)

📊 Nextjs with Pages Router + API routes

• using pages and API route handlers

benchmarks git:(master) ✗ npx autocannon -c 100 -d 40 -p 10 localhost:3009/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"

Running 40s test @ http://localhost:3009/api/posts
100 connections with 10 pipelining factor


┌─────────┬────────┬────────┬────────┬────────┬───────────┬──────────┬─────────┐
│ Stat    │ 2.5%   │ 50%    │ 97.5%  │ 99%    │ Avg       │ Stdev    │ Max     │
├─────────┼────────┼────────┼────────┼────────┼───────────┼──────────┼─────────┤
│ Latency │ 317 ms │ 349 ms │ 372 ms │ 446 ms │ 356.53 ms │ 97.84 ms │ 4023 ms │
└─────────┴────────┴────────┴────────┴────────┴───────────┴──────────┴─────────┘
┌───────────┬────────┬────────┬─────────┬─────────┬──────────┬────────┬────────┐
│ Stat      │ 1%     │ 2.5%   │ 50%     │ 97.5%   │ Avg      │ Stdev  │ Min    │
├───────────┼────────┼────────┼─────────┼─────────┼──────────┼────────┼────────┤
│ Req/Sec   │ 1,994  │ 1,994  │ 2,801   │ 3,001   │ 2,795.38 │ 224.84 │ 1,994  │
├───────────┼────────┼────────┼─────────┼─────────┼──────────┼────────┼────────┤
│ Bytes/Sec │ 7.7 MB │ 7.7 MB │ 10.8 MB │ 11.6 MB │ 10.8 MB  │ 867 kB │ 7.7 MB │
└───────────┴────────┴────────┴─────────┴─────────┴──────────┴────────┴────────┘

Req/Bytes counts sampled once per second.
# of samples: 40

113k requests in 40.04s, 432 MB read

📊 Nextjs with Pages Router + API routes + request pattern matching

• using pages and API route handlers
• exposes single endpoint and uses ts-pattern to match requests

➜  benchmarks git:(master) ✗ npx autocannon -c 100 -d 40 -p 10 localhost:3012/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"


Running 40s test @ http://localhost:3012/api/posts
100 connections with 10 pipelining factor


┌─────────┬────────┬────────┬────────┬────────┬───────────┬───────────┬─────────┐
│ Stat    │ 2.5%   │ 50%    │ 97.5%  │ 99%    │ Avg       │ Stdev     │ Max     │
├─────────┼────────┼────────┼────────┼────────┼───────────┼───────────┼─────────┤
│ Latency │ 254 ms │ 373 ms │ 395 ms │ 416 ms │ 376.38 ms │ 232.65 ms │ 6919 ms │
└─────────┴────────┴────────┴────────┴────────┴───────────┴───────────┴─────────┘
┌───────────┬────────┬────────┬─────────┬─────────┬──────────┬────────┬────────┐
│ Stat      │ 1%     │ 2.5%   │ 50%     │ 97.5%   │ Avg      │ Stdev  │ Min    │
├───────────┼────────┼────────┼─────────┼─────────┼──────────┼────────┼────────┤
│ Req/Sec   │ 1,864  │ 1,864  │ 2,645   │ 2,945   │ 2,644.48 │ 195.6  │ 1,864  │
├───────────┼────────┼────────┼─────────┼─────────┼──────────┼────────┼────────┤
│ Bytes/Sec │ 7.2 MB │ 7.2 MB │ 10.2 MB │ 11.4 MB │ 10.2 MB  │ 755 kB │ 7.2 MB │
└───────────┴────────┴────────┴─────────┴─────────┴──────────┴────────┴────────┘

Req/Bytes counts sampled once per second.
# of samples: 40

107k requests in 40.07s, 408 MB read

📊 Fastify app

• using raw fastify (without fastify-cli)

➜  benchmarks git:(master) ✗ npx autocannon -c 100 -d 40 -p 10 localhost:3013/api/posts -H Authorization="Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJvcmc6bWljaGFsY3p1a206aXNzdWVyIiwiYXVkIjoib3JnOm1pY2hhbGN6dWttOmF1ZGllbmNlIn0.CHaB_qZjIuKMYc487Jscj-KCyj1OuW8-e1R1d1n0KucsF2t_XtXNDzjOk7qowhpVLwF_GBzgUvPYoCi3BUmSyQ"


Running 40s test @ http://localhost:3013/api/posts
100 connections with 10 pipelining factor


┌─────────┬───────┬───────┬───────┬───────┬──────────┬──────────┬────────┐
│ Stat    │ 2.5%  │ 50%   │ 97.5% │ 99%   │ Avg      │ Stdev    │ Max    │
├─────────┼───────┼───────┼───────┼───────┼──────────┼──────────┼────────┤
│ Latency │ 20 ms │ 24 ms │ 50 ms │ 56 ms │ 32.26 ms │ 13.36 ms │ 704 ms │
└─────────┴───────┴───────┴───────┴───────┴──────────┴──────────┴────────┘
┌───────────┬─────────┬─────────┬────────┬────────┬────────┬──────────┬─────────┐
│ Stat      │ 1%      │ 2.5%    │ 50%    │ 97.5%  │ Avg    │ Stdev    │ Min     │
├───────────┼─────────┼─────────┼────────┼────────┼────────┼──────────┼─────────┤
│ Req/Sec   │ 26,815  │ 26,815  │ 30,927 │ 31,455 │ 30,516 │ 1,125.28 │ 26,812  │
├───────────┼─────────┼─────────┼────────┼────────┼────────┼──────────┼─────────┤
│ Bytes/Sec │ 90.9 MB │ 90.9 MB │ 105 MB │ 107 MB │ 103 MB │ 3.8 MB   │ 90.8 MB │
└───────────┴─────────┴─────────┴────────┴────────┴────────┴──────────┴─────────┘

Req/Bytes counts sampled once per second.
# of samples: 40

1222k requests in 40.02s, 4.14 GB read

🧑‍💻 About me

michalczukm.xyz