Benchmarking the Next.js server vs nginx at serving a static site

Adam Jones

Personally

This is my personal blog, where I write solely in my personal capacity. It does not represent the positions of any organisations I'm associated with.

Also, everything here is provded "as is", without warranties of any kind, express or implied.

29 April 202429 April 2024

Update: I did a follow-up with a more realistic setup, showing what the performance looks like when this is running on a remote server.

Next.js is a React framework with a bunch of neat features to make web development easier.

1. Export the files and serve them with nginx or similar
2. Use the default Next.js production server (next build && next start)
3. (not recommended²

   I think the HMR functionality opens up additional attack surface area, and I expect this to be a lot slower. I’m testing this anyway as I could imagine people doing this by mistake.

   ) Use the Next.js development server (next dev)

My suspicion: 1 is likely fastest. However, 2 is often simpler - you don’t need to configure a second web server, and your deployment configuration can be the same across static and dynamic Next.js apps.

Knowing how much slower this is lets us properly evaluate the penalty, and make evidence-based decisions about the trade-offs.

So, how fast is it? I took this blog (yes, the very one you’re reading) and tested how long it takes to load.

events {}

http {
    server {
        listen 8080;
        root ./dist;

        index index.html;
        error_page 404 /404.html;

        location / {
            try_files $uri $uri/ $uri.html =404;
        }
    }
}

Median HTTP load times, high reqs/second (i.e. for the HTML response, using k6):

Median page load times, no additional reqs/second (i.e. for the browser to consider the page fully loaded, using Puppeteer):

Takeaways

Wow, nginx is fast - 4874x faster than Next.js under heavy load for median response time. I had some sense of this before, but not quite how much it dominates on request duration. I think this is largely because Next.js slows down under heavy request load: its median time when processing a single request was much lower.

That said, the Next.js server is plenty fast for real-world use cases. It was just 20ms slower (a fifth of a blink) to load the page under low load, and even under heavy load (3733 requests/second) it still had a median request duration of 253ms.

The real-world penalty will likely be lower than this: network latency will start to dominate. And if you’ve got dynamic requests to APIs, those will almost certainly be the bottleneck rather than the static file serving.

Overall, with this small a penalty I’d pick running Next.js in most cases: it’s significantly easier to set up (provided you’re building a Next.js app already), and standardises your deployment across static and dynamic applications. It's probably only worth looking at nginx when you’re getting hundreds or thousands of requests per second, or if you've already got a really smooth nginx pipeline.

Update: I did a follow-up with a more realistic setup, showing what the performance looks like when this is running on a remote server.