How to Choose a Next.js Hosting Provider for Sitecore XM Cloud

Region Availability Considerations

During your evaluation you need to consider specific hosting region needs. Most providers have overlapping region coverage so if your operations can function within the commonly available regions, region availability won’t significantly impact your decision.

Serverless hosting options like Vercel, Cloudflare Pages, and Netlify offer a global edge network, serving users from the closest server in this network. This approach optimizes performance but does make it a little more difficult to restrict content content delivery to one specific location. In most cases users will be served by a service within their region, but if one is not available in their region, the nearest available service one will take over.

If you have a compliance or data residency requirement tied to specific regions, you need to examine the vendors full list of region options where they can provide Next.js hosting. As an example, Vercel has a highly global network but does not have a region in Canada so if you require Canadian users to be served by a server hosted in Canada, this might not meet your needs. Similar examples could be found for other countries and other vendors, but in general you need to understand your specific compliance requirements and then match against the vendors regions.

If having the most regions available is your goal, you can’t really beat Cloudflare, Amazon, or Microsoft. As an example, Cloudflare has over 300 cities covered, including in mainland China. Vendors like Vercel and Netlify are often building off the back of these other infrastructure vendors.

As a note, Azure Static Web Apps has stated previously that they do not provide a data residency guarantee on the regular plans, but there is a new Dedicated plan available (in preview) in East US 2, Central US, West US 2, and East Asia.

If your team would rather have more control over the infrastructure, Azure App Services has extensive regional coverage and gives you the option for enforcing restrictions yourself at a very granular level. However, this requires more effort and time from your team to manage the infrastructure.

Ultimately, this will become a balance of convenience vs compliance.

Convenience Layers and the Impact on Total Cost of Ownership (TCO)

As you get past the initial compliance and support needs of your organization, you’ll likely want to evaluate the product itself to see how it works for your technical delivery and operations teams. I feel this is where the convenience layers offered by some of the vendors really allows them to distinguish themselves. The easier it is to meet your goals with the product, the more likely your team will be efficient and you’ll get a better value out of your investment.

Vercel and Netlify are an “easy mode” for your delivery teams. They offer a lot of built-in services such as CDNs, DDoS protection, image optimization, localization, SSO, continuous integration, deployments, and straightforward infrastructure management. They generally have a smooth experience for your team to be efficient in their delivery. Both are trying to move beyond just app hosting and providing easier ways to get teams onto their platforms and keep them there. Both also offer features that allow you to do reviews with your teams before things go live. The ease with which you can automate everything is so far ahead of other offerings it really isn’t fair.

Of the two, specifically with Next.js, Vercel has a slight edge as they also develop the Next.js framework. This allows them to improve both the framework and their hosting services in tandem to create the smoothest flow.

AWS Amplify also offers an opinionated layer to simplify the Developer Experience (DevEx) with AWS infrastructure. While not quite at the same level as Netlify or Vercel, it is definitely easier than trying to dive into classic AWS infrastructure management.

However, choosing an opinionated approach to the serverless infrastructure means sacrificing some of the fine-grained control over how your infrastructure services are configured. Azure App Services has the advantage of a rich set of infrastructure management capabilities where you can get full control and build exactly what you want. This is ideal for experienced teams with complex requirements or those seeking to leverage an existing Microsoft Azure subscription.

A side note on DDoS features in a convenience layer: I can’t be certain about all offerings, but I’ve definitely seen in Vercel that while your service is not denied you can still see certain attacks raising your Vercel usage in serverless functions, thus making your bill go up. Make sure you test these types of things out to see if you need to implement any other functions from another service to optimize your billing.

Next.js Feature Support

Sitecore XM Cloud can support numerous frameworks, but honestly most folks are building with Next.js because that was what Sitecore was recommending and documenting. Definitely analyze the support for Next.js applications before making a decision! There is a great video series by Thomas Desmond (ex-Sitecore, now Cloudflare) who evaluated how Next.js features stack up across a variety of providers. Here’s a quick summary of the findings of those he looked into:

• ⚠️ AWS Amplify: Supports all the Next.js features, but ISR seems to rebuild more slowly than other providers.
• ⚠️ Azure App Services: Technically seems to have the Next.js features working, but Incremental Static Regeneration (ISR) seemed to have some minor inconsistent results with fast refreshes and App Services also misses out on a lot of features other hosting providers have rolled into their solution. You have to roll your own for so many parts of the developer experience.
• ❌ Azure Static Web Apps (SWA): Good support of Next.js 13 features, Next.js 14 doesn’t deploy well yet. However, SWA is in preview so not a great choice for production deployments right now.
• ❌ Cloudflare Pages: Not recommended. No image optimization or API Routes, server-side routes must be configured as edge runtime routes. Cloudflare is working on better Next.js support, so this might be one to watch.
• ❌ Firebase App Hosting: Not recommended. It doesn’t have Next.js 14 support yet, seems to work pretty well with Next.js 13 but is missing Image Optimization. Firebase App Hosting is also still a preview release, so even if you are okay with Next.js 13 and no image optimization, this is probably not great for a production deployment yet.
• ✅ Netlify: Netlify is always a step behind Vercel, but they work hard to be a top-tier Next.js offering. They recently added in on-demand ISR support to close the gap with Vercel. A few oddities exist in the developer experience, and some things just seem to not work as expected and take more time to debug, but a very solid option behind Vercel for feature support.
• ✅ Vercel: Unsurprisingly, the makers of Next.js can make all of Next.js work. #1 option for this category.

⚠️Fair warning: These summaries are based on a point time (early 2024) so depending on when you are investigating, you may want to do a similar evaluation yourself.

❕Also note: When you investigate the Next.js feature support, I strongly recommend not trusting what’s on the marketing pages or documentation and instead try to build a quick sample app the way your team likes to build and check it across multiple providers. This will get you a good feel for where your implementation team might run into early problems between providers. This won’t be an exhaustive evaluation, but it will help you filter down a few options.

Sitecore XM Cloud Feature Support

By this point, you have probably already started trending towards a few of these options in your head, based on their support for your team’s compliance, support, operations, and development needs. However, if you are currently looking at this hosting option specifically for XM Cloud, there are a few key features you need to validate are part of your hosting provider.

1. Serverless functions: XM Cloud uses these for API routes, Middleware, Edge functions, SSR, and ISR. This should be available with most serverless offerings.
2. API routes: XM Cloud requires these for Pages, Health checks, and other critical systems.
3. Middleware: XM Cloud uses the middleware for JSS Multisite, XM Cloud Personalization and XM Cloud Redirects
4. Multilingual/Internationalization/Localization: If missing, multilingual content cannot be configured/mapped to XM Cloud languages
5. Static Site Generation (SSG): If not available, you will need to run Server-Side Rendering (SSR) for all requests. Your solution will likely want this to improve performance and reduce the number of queries you send to XM Cloud’s Edge layer.
6. Incremental Static Regeneration (ISR): This allows for your static sites to be updated as content changes in the CMS. Without this feature, content will require a full rebuild to update. This may be acceptable for small sites with very little content or infrequent content changes.
7. On-demand ISR: ISR usually requires a request to trigger a refresh of the content. On-demand will ensure the cache is updated at the publishing point. This will prevent stale content from being served and also avoid performance impacts on any sites with a high volume of visits that may all be requesting new content at the same time.
8. Server-Side Rendering (SSR): Some services only support fully static generation at time of build. SSR allows for dynamic content to be generated at the time of request.
9. Edge functions: While Middleware features will achieve the desired functionality, Edge functions will increase the performance of this middleware.
10. Image caching: Without caching, image delivery performance can be heavily impacted.
11. Image optimization: This allows for optimized delivery to different devices. Without this optimization the mobile performance of the application will suffer.
12. Hostname configuration: This allows you to run multisite domains configured for a single Next.js app. Otherwise, separate apps will need to be deployed.

Sitecore themselves have partnered with Netlify and Vercel and both providers meet all of these XM Cloud requirements and allow you to purchase through them. David Bairstow has an overview of Vercel vs Netlify if you want to see some of the similarities and differences.

⚠️ You may notice that these are features primarily associated with serverless hosting. If, for some reason, you need to go with Azure App Services, you should know that Sitecore does not recommend using Azure App Services to host Next.js for XM Cloud. The Sitecore Accelerate document linked there provides an overview of some of the issues.

The Cost of Hosting

If you’ve gone this far in your evaluation and started doing your proof of concept with some vendors, you likely have started in on the pricing discussion and started becoming increasingly concerned by the Enterprise pricing being shown to you.

Yes. It’s worth it.

You can do a projection based on everything you would use from one of these services, basing it on the team and needs you have, but with the raw infrastructure you have today. How much would you pay somebody to do that full time, 24/7/365? Keeping your business online?

Exactly.

That said, it’s still a big number that often goes into a different budget and it can be hard to swallow some of the projected billings for a year of hosting, especially if you plan on starting small with a simple microsite or a campaign. As you start rolling more and more of your properties into XM Cloud and your hosting provider, only then do you start realizing the full potential of the tools and really getting the value out of your expense.

HOWEVER: Some of the cost of these services is focused around the extra features they deliver to you that make your team’s life easier. You might already have these features through some other service that your team already pays for, or you won’t have a need for those features. You might be looking at doing a consolidation, or perhaps switching to a vendor that offers fewer features but fits better with the stack you already have.

And then there are hybrid architectures. You might be interested in leveraging the best of one service and combine it with the best of another. This can often meet all your needs via multiple vendors but can drive your costs up. For example, Cloudflare has great expertise in security and edge performance which complements Vercel or Netlify’s specialization in Next.js development and deployment. Mixing Cloudflare security services with Vercel or with Netlify could yield some really nice overall benefits.

In the end, it’s important to look at the set of features you will be using, the total cost of operating this yourself, and also the value delivered to your organization. This can help you determine if a given price range for a vendor is a fit for what you are trying to do right now.

A Winner?

Your particular needs might drive a different ranking, but below are my thoughts on ranking these offerings.

🥇 Vercel: If you have no existing Next.js hosting infrastructure and don’t have a specific compliance need they don’t cover, I think Vercel is the one that ticks the most boxes for an XM Cloud implementation team.

• Sitecore has partnered with them on XM Cloud the longest and have built a solid developer experience
• Vercel develops Next.js so feature support is always best on their infrastructure
• They cover all the Sitecore XM Cloud feature needs
• Vercel’s Enterprise tiers have a dedicated account manager and a really solid Support SLA
• Decent compliance coverage

🥈 Netlify: Sitecore’s other partner, Netlify, is probably a VERY close second. There are some peculiarities in their developer experience for XM Cloud implementations and their Next.js feature support will always lag behind Vercel, but they have excellent SLAs and compliance coverage, like Vercel.

🥉 AWS Amplify: I would put AWS Amplify as third in this close race. They are really solid on a lot of the fronts (compliance, support SLAs, Next.js feature support, etc.). I would suggest that their development experience has more issues with the Sitecore XM Cloud flow than the other two, their convenience layer is not really at the same tier, and their ISR support seems to have some issues at the moment that puts them behind the other two.

References

All of these sources were either cited, linked, or consumed in preparation of this guide. Please refer to these sources for the latest updates from the vendors!

• Compliance validation for AWS Amplify (Amazon)
• Compare AWS Support Plans (Amazon)
• Hosting Sitecore XM Cloud Next.js frontend in AWS Amplify (Nehemiah Jeyakumar, CloudIQ Technologies)
• Cloudflare Certifications and compliance resources (Cloudflare)
• Cloudflare Developer Platform Plans (Cloudflare)
• Cloudflare Pages and Next.js : I’m Not Recommending It (Thomas Desmond, Cloudflare)
• Privacy and Security in Firebase (Google)
• Firebase Pricing (Google)
• Microsoft Azure Compliance Offerings (Microsoft)
• Azure Support Plans Comparison (Microsoft)
• Azure Static Web Apps offers new Dedicated plan in preview (Microsoft)
• Running Next.js on Azure App Services (Sitecore)
• Netlify Trust Center (Netlify)
• Netlify Pricing (Netlify)
• Netlify & Cloudflare: A Powerful Infrastructure Stack (Dan Cruickshank, Fishtank)
• Next.js Feature Support on Different Providers (video playlist) (Thomas Desmond, Cloudflare)
• Vercel Trust Center (Vercel)
• Vercel Support Terms (Vercel)
• Vercel Edge Network Regions (Vercel)
• Vercel and Netlify’s Convenience Layer (Thomas Desmond, Cloudflare)
• Vercel vs Netlify: A Comparison for Modern Web Development (Derek Bairstow, Fishtank)
• Vercel + Cloudflare: A Modern Infrastructure Super Team? (Dan Cruickshank, Fishtank)

🤖 AI Disclosure

• AI Research: Initial research for Support Features matrix done with ChatGPT. Data confirmed and corrected manually by author. Reference sources linked.
• AI Summary: The TL;DR section at the beginning was generated using ChatGPT.