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

Jason St-Cyr - Oct 10 - - Dev Community

What Do You Need to Consider?

You've just decided on moving to Sitecore's new XM Cloud product and now you have to figure out how to host your Next.js application that is going to be connecting to your XM Cloud instance. When you talk to Sitecore, they mention their partners Vercel and Netlify as options, but you aren't sure if that's the right option for you. Or maybe you already have a preferred infrastructure vendor like Azure, AWS, or Cloudflare and want to use them instead. How do you figure out what the right option is?

Here are the categories I think you need to examine, as an Enterprise, to make sure you are mitigating risks and finding a match for you and your Sitecore XM Cloud implementation:

  1. Security and Compliance
  2. Support and SLAs
  3. Region Availability
  4. Convenience Layers and the Impact on Total Cost of Ownership (TCO)
  5. Next.js Feature Support
  6. XM Cloud Feature Support
  7. The Cost of Hosting
  8. A Winner?

⏱️ The TL;DR summary:

Choosing the right hosting provider for your Next.js app with Sitecore XM Cloud is crucial for security, performance, and compliance. Evaluate options like Vercel, Netlify, and AWS Amplify based on key factors such as security and compliance standards, support and SLAs, region availability, total cost of ownership, and feature support for and Sitecore XM Cloud. Vercel is highly recommended for its comprehensive feature set and seamless integration with Sitecore, followed closely by Netlify who lags a little on DevEx and Next.js alignment and AWS Amplify whose ISR support and convenience layer is not at the same level. Ensure you align your choice with your organization's specific needs and compliance requirements.

The Top 3 Ranking:
🥇 Vercel
🥈 Netlify
🥉 AWS Amplify

Security and Compliance

I think a great first filter is a match on security and compliance. For most Enterprise organizations, you are going to want to evaluate whether or not a given hosting vendor is able to meet your organization's requirements. If you require ISO-27001, SOC2, HIPAA, GDPR, etc. then your available list of vendors is going to start shrinking fast and leave you with a manageable list of options. If you don't have these types of requirements, then you can skip over it, but most folks who are looking at XM Cloud are usually concerned about at least a few of those compliance regulations.

Here are a few vendor options and their published compliance:

Vendor ISO-27001 SOC 2 HIPAA PCI DSS
AWS Amplify ✅ (AWS Amplify Console)
Azure App Services
Azure Static Web Apps (SWA)
Cloudflare Pages
Firebase App Hosting
Netlify
Vercel

A few notes:

  • Microsoft Azure has a lot of compliance needs that have been checked off, well beyond the limited ones I called out here. While Azure doesn't have great hosting options for Sitecore XM Cloud specifically, if compliance is a huge need for you then you might need to have a less than optimal XM Cloud experience in order to meet your compliance needs with headless hosting.
  • Google (Firebase App Hosting) has obtained ISO 27001 and SOC 2 for their other Firebase services, so I feel it is likely that they will add App Hosting to their services listing once it is no longer in preview, to match with their other offerings.

Support and SLAs

For most organizations, agreements guaranteeing uptime, disaster recovery, support ticket response times, etc. are usually an important deciding factor. Often, the specific details of these don't matter to a lot of teams, just that they exist in some form to mitigate risk.

Vendor 99.9% SLA 24/7 Support Support Tiers Enterprise Response Time (Variable by severity and tier) Community Support Dedicated Account Manager (on Enterprise tier)
AWS Amplify Basic, Developer, Business, Enterprise On-ramp, Enterprise 30 minutes -- 24 hours
Azure App Services Basic, Developer, Standard, Professional Direct, Enterprise 1 hour -- 8 hours, 15 minutes for Enterprise
Azure Static Web Apps (SWA) Basic, Developer, Business, Enterprise On-ramp, Enterprise 1 hour -- 8 hours, 15 minutes for Enterprise
Cloudflare Pages Free, Pro, Business, Enterprise (Standard and Premium packages) 1 hour -- 24 hours (Enterprise Premium), Slowest is 48 hours (on P4 issue on Enterprise Standard)
Firebase App Hosting Free, Blaze (pay-as-you-go) N/A (Preview)
Netlify Starter, Pro, Enterprise (Business and Premium support packages) 1 hour -- 4 hours (Enterprise)
Vercel Hobby, Pro, Enterprise (Standard, Premium, and Platinum packages) 30 minutes -8 business hours (Enterprise Platinum), Slowest is 16 business hours (Severity 4 on Enterprise Standard)

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 VercelCloudflare 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 2Central USWest 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.

💡 On the Value of Convenience Layers: 
"Development teams need to focus on building great applications, not managing deployments and infrastructure. The convenience layer is directly related to the developer experience. You can build and deploy faster with a fully featured convenience layer that covers development, review, deployment, and scaling."
-- Thomas Desmond, Cloudflare Technical Marketing Engineer

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!

🤖 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.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player