Next.js meets ASP .NET Core — a story of performance and love at long tail

Building the Next.js web app then running the ASP .NET Core server

A hint of where we are headed…

Measured throughput was ~6–7x greater on ASP .NET Core; P99 latency was ~2–4x better on ASP .NET Core

A step back before we get to the fun part…

Web page interactivity does not require an interactive server with dynamic api’s

Why Node.js?

But do we need SSR?

When you install an app on your mobile device, a static app package is installed on your device. A statically exported Next.js app isn’t much different

Fine. Let’s host static files. Are we done now?

  • /pages/index.js
  • /pages/post/[pid].js
  • /out/index.html
  • /out/post/[pid].html

SSG-safe rehydration

How do we ensure the right contents are served?

ASP .NET Core to the rescue

Show me the code

Local development experience

Is it any faster? Benchmark time

Scenario 1: 10 concurrent, 50k requests

 Hosting stack    Avg (ms)    P99 (ms)
---------------- ----------- ------------
ASP .NET Core 0.469 1
Node.js 3.355 5

Scenario 2: 100 concurrent, 100k requests

 Hosting stack    Avg (ms)    P99 (ms)
---------------- ----------- ------------
ASP .NET Core 4.957 22
Node.js 29.652 41

Is this a fair comparison?

  • The capabilities of the two stacks are not equivalent, and the ASP .NET Core hosting stack enabled by this project does not support SSR content. To a large degree, we are comparing apples and oranges. On the other hand, entire apps can be built without needing SSR. In those cases, the additional capabilities of running in Node.js are unused
  • Only measuring the time to load the HTML for a page. Loading other static content (js, css, images, etc.) may account for longer delays in observed page load performance in practice, and those aren’t taken into account in these tests
  • Not necessarily following best practices for production hosting, though the setup followed the official guidance for both Next.js and ASP .NET Core without additional tweaks in either
  • Run on Windows, whereas each stack could exhibit different perf characteristics on a different OS

Where do we go from here?

  • If you already have a backend written on .NET technologies, and you are looking to add a modern React-based web app to your solution. Instead of spinning up a new (micro-?)service to host Node.js, perhaps you’d be interested in hosting the web app alongside your existing ASP .NET Core services.
  • If you already host a Next.js web app and have no need for dynamic server-generated content and you want to extract the last drop of performance and/or reduce your cloud spend
  • Simply learning more about how Next.js Static HTML Export works
  • Simply learning more about ASP .NET Core and YARP

--

--

--

Principal Software Architect @Microsoft happiest when I’m learning new things. Opinions are mine and not my employer’s.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Objective-C: How to convert a dictionary to JSON string?

Setting up React Native Vector Icons for IOS

FAQs about Ember.js in 2019

Access modifiers and Constructor in TypeScript

Why You Should Learn React

Tool — Google Play Comments Extractor

Cynoteck’s free app for toddlers to learn while playing

Express tutorial for ExpressJS

Implementing a basic Binary Tree

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Nissimoff

David Nissimoff

Principal Software Architect @Microsoft happiest when I’m learning new things. Opinions are mine and not my employer’s.

More from Medium

Clean Code Architecture with Mediator & CQRS pattern in .Net Core

Dependency Injection and Different ways to inject it using .NET Core API

Azure Function App as the Backend API for WebApps (ReactJS)

Secure .NET CORE 6 Web API with JWT from Duente IdentityServer