Azure Static Web App Vs Vercel For Deploying Next Js Website
If you’re looking to host your Next Js website there’ll be two main options you’ll come across for web hosting: Vercel and Microsoft Azure Static Web App. Both offerings are Serverless, meaning you do not have the hassle of configuring a Linux server. If you have never had to do that before, I can assure you, configuring a Linux server for web hosting is a nightmare. I conducted some tests on an identical Next Js web application using the paid offerings from both Vercel and Microsoft Azure Static Web App.
Performance
Using the PageSpeed Insights tool from Google, Vercel was superior in performance for Next Js web hosting. From my personal experience, the page load from Microsoft Azure Static Web App was 4.2 seconds. An awful page load experience. You can see the stats from PageSpeed insights.
If you were like me If you were like me, you might look at the above and focus on the Largest Contentful Pain (LCP) metric as a possible explanation for the poor Next Js web application experience on Microsoft Azure Static Web App. Following SEO guids from Vecel , I disabled lazy loading on images above the fold. An example of that code is below, where the `priority` value is set on the image to disable lazy loading on the image
Contrast that with the performance from Vercel:
Deployment Tools
To deploy a Next Js website to any hosting provider you will need to deploy via some sort of Git operations tool such as GitHub or Azure DevOps. My personal preference is Azure DevOps, but if you’ve primarily been using GitHub it makes sense to stick with GitHub actions. On Git operations tools, you are limited to using only GitHub actions when deploying your Next Js website to Vercel. With Azure Static Web apps you can choose between GitHub Actions or Azure DevOps Pipelines for deploying your Next Js website.
Pricing
Both options from Vercel and Microsoft offer free options. There is only one paid options from Microsoft for Azure Staitc Web Apps and that’s the Standard options which is approximately USD $19.95 per month. You can add Microsoft’s ‘Edge’ functionality for an additional cost. This is supposed to cache your web application across datacentres around the world, much like a Content Delivery Network (CDN).
Functionality
Additional functionality from Microsoft on Azure Static Web apps includes logging, application monitoring, firewall and network management. Logging can help you debug your application and understand performance issues via a service called Application Insights. At least it’s supposed to anyway. When I had Application Insights enabled for my Azure Static Web App hosting a Next Js website, I did not see any logs coming through. You might care about firewalls and network features if you don’t want your Next Js website to be publicly available on the internet. For example, you’ve built a web application for a specific client and you want to restrict access to only that client, you can set network rules to only allow traffic from your client’s address space.
Conclusion
Personally, my recommendation would be to stick with Vercel for deploying your Next Js website if you are creating a personal project or a website for a small business. I think the use case for deploying a Next Js website to Azure Static Web App would be if you were a larger enterprise who needed more control over who can access your app and collaborating with larger teams. If that was the case, then Azure would be a great option.
