React and Next.JS deployment options

The Start

Recently, I was working on my business app and landing page. I built the landing page using Next.js due to its server-side rendering capabilities, while my application is built with Vite and React.js for simplicity and control over authentication and authorization. A sidenote here is that I recommend using pure React as much as possible because Next.js has significant problems with authentication, especially when you need to authenticate against your own backend system.

The Problem

When my apps were ready, I faced the question of how to host my app and landing page in the cloud. Since I had free credits in Azure, I chose it as my cloud provider. I found a service in Azure called Azure Static Web Apps, which is meant for SPA pages and also supports Next.js.

First, I deployed the React application, and it worked great, with no issues observed and good performance. However, when I deployed the Next.js landing page, issues appeared. The main problem was very poor performance. When I compared the local page to the hosted page, the performance was terrible.

As I mentioned earlier, I faced performance problems with the service. I tried different approaches but ended up with no improvements. From my observations, when the app is idle, the server shuts down, and each new request starts the server up again, causing slowness.

The Solution

I found another product from Azure called Azure Web App Service. For this one, I had the option to choose the server size and resources. I ended up with 2 vCPUs and 2GB of RAM. Deployment for this was more difficult, as it required building a container and deploying it. However, the performance was much better, and all my problems were solved.

Recommendations

Based on my testing, I recommend using Azure Static Web Apps for pure React applications and Azure Web App Service for Next.js applications. Maybe someday Azure will solve this problem, and it will start to work well with Next.js on Azure Static Web Apps, but in the meantime, use a different service.

If you want to see the performance live, feel free to visit: