“Rendering Host” is a term coined by Sitecore, referring to the platform that hosts the website. Similarly, “Editing Host” refers to where you host for editing or building your website. This article will explore the options for hosting websites (Rendering Host) built with Sitecore XM Cloud and Sitecore JSS for the Next.js framework.
Server vs Serverless
At a fundamental level, there are two options for hosting a website built on the Next.js framework: using a Node Server or a Serverless hosting environment. How do you go about hosting your website on a Node Server or in a Serverless environment? The diagram below provides a detailed breakdown of the various hosting options available. However, not all of these options support all Next.js features. It is advisable to avoid those that are not fully compatible with Next.js. For more information on which Next.js features are supported by different hosting providers, refer to Thomas Desmond’s blogs.
Node Server Hosting
A Next.js application can be hosted on any platform that supports Node.js. This is straightforward because Next.js includes a web server that starts serving requests when the next start command is executed, and the production-optimized build output is generated by the next build command. The diagram on the left side illustrates various options for hosting a Next.js application using the Node.js runtime.
Server hosting is not optimized for performance. For example, to cache static pages, you need to place a CDN in front of the hosting. Many optimizations available in serverless hosting options must be configured manually. Among these options, Azure App Service and AWS Elastic Beanstalk are the most advanced in terms of scalability because they are Platform as a Service (PaaS). They offer autoscaling, fault tolerance, and load balancing, making them easy to set up. On-Premise, Cloud VM, and VPS are similar hosting solutions, with Cloud VM being the most scalable as it can be adjusted within the cloud infrastructure, while On-Premise and VPS are limited by their hardware. A Next.js application can also be hosted in a Docker container. Using containers with an orchestrator like Kubernetes can be scalable, but it must be hosted on one of the server hosting options.
Another way to host a Next.js application that doesn’t require a Node.js runtime is through Static Export. Running next build generates static HTML, CSS, and JS that can be hosted on any web server that supports static assets. However, this option does not support many Next.js features such as Server-Side Rendering (SSR) and Middleware.
Serverless Hosting
In Serverless Hosting the hosting provider’s build process breaks the build output into following four categories.
Static Resources
All static pages generated by the build process through Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are deployed to Static Storage. During deployment, assets like unoptimized images, fonts, and JavaScript files are also uploaded to Static Storage. When a request is made for a static page, the hosting service checks if the page is already in the cache. If it is, the page is rendered from the cache; if not, it is fetched from static storage and then copied to the cache for future requests.
For ISR pages, when a request is made, the hosting service verifies if the revalidation period for the page has elapsed. If it has, the stale page is served from the cache while a Serverless Function (Prerender Function) is triggered to regenerate the page. Once the new page is generated, it replaces the stale page in both the cache and Static Storage.
Serverless Function
API Routes and Server-Side Rendering (SSR) pages are converted into serverless functions. When getServerSideProps is used in a Next.js page, it generates a serverless function for that page. This function is responsible for fetching data and rendering the page on each request.
Edge Function
Edge Functions in Next.js enhance performance by deploying code at the edge, closer to the user’s location. They also improve security by using Edge Middleware, which runs before requests are routed to the server. Despite limitations such as code size, memory allocation, and timeout limits, Edge Functions are designed to run lightweight code on the V8 runtime near users. Therefore, if a Next.js application uses middleware or edge functions, that code will be deployed at the edge rather than on the server as serverless functions.
Image Optimization
The Sitecore JSS image component uses next/image to provide image optimization and render images in the Editing Host. During the Next.js build and deployment process, optimized images are created and deployed to the edge if they are part of the Next.js solution. For remote image URLs, Next.js optimizes images at runtime and requires width and height specifications in the code.
The description above explains how a Next.js application is divided into different parts and deployed in a serverless environment. To make this clearer, I have included a diagram from Vercel’s documentation, which best illustrates this process. Other hosting providers may use different approaches.
Source VercelChoosing Factors
How to decide which type of hosting option to host Sitecore Websites, Server Hosting or Serverless Hosting. What hosting provider to go with. The answer to this depends on many factors. Let’s discuss them.
Performance
Every company aims for optimal website performance, but performance is a relative concept. Achieving higher performance often involves significant costs. One company might be willing to invest millions to reduce response time by a second, while another might not find such an investment crucial. Therefore, it’s essential to define what level of performance is important for an organization. While a website hosted on a serverless platform will perform better, it will be more expensive than hosting on a Node Server.
A website’s performance depends not only on how requests are processed on the server or serverless platform but also on how those requests are routed from users’ machines to the server. Superior network architecture enhances performance. For instance, Amazon, Azure, and Vercel use Anycast for load balancing, which significantly improves performance and security.
Anycast load balancing is a technique used to distribute incoming network traffic across multiple servers or data centers, ensuring efficient and scalable content delivery. Here’s how anycast load balancing works:
- Anycast IP address: A single IP address is announced from multiple locations (edge servers or data centers) worldwide.
- Route announcements: Each location announces the same IP address to the internet using BGP (Border Gateway Protocol) routing.
- Closest location: When a user sends a request to the anycast IP address, their internet service provider’s (ISP) router directs the request to the closest location (edge server or data center) advertising the same IP address.
- Load balancing: The request is then load-balanced across multiple servers within that location, ensuring efficient use of resources and minimizing latency.
- Content delivery: The requested content is delivered from the load-balanced server to the user.
Anycast load balancing offers several benefits, including:
- Reduced latency: Users connect to the closest location, reducing latency and improving performance.
- Improved scalability: Traffic is distributed across multiple locations, allowing for more efficient handling of high traffic volumes.
- Increased availability: If one location becomes unavailable, traffic is automatically routed to another location advertising the same anycast IP address.
By leveraging anycast load balancing, content delivery networks (CDNs) and organizations can deliver fast, reliable, and scalable online experiences to users worldwide.
The following picture taken from the Vercel website shows the difference between Geocast (upper) vs Anycast (lower) load balancing. In Anycast you can see that traffic is routed based on the closest distance not based on geo boundary. For some traffic from Europe routed to africa.
Reliability and Fault Tolerance
The reliability of a website hinges on the hosting architecture’s ability to manage loads and the fault tolerance of the hosting provider. Serverless architecture is superior as it is optimized to handle increased loads effectively. Anycast load balancing enhances protection against DDoS attacks by distributing requests based on server capacity, health, and proximity. This approach eliminates a single point of failure, expands the network surface area, and complicates efforts for hackers to launch DDoS attacks.
Hosting Cost
Serverless hosting is more expensive than Node Server hosting. Hosting websites on Vercel costs significantly more than on Azure App Service, but cost shouldn’t be considered in isolation. App Service hosting necessitates internal DevOps resources for application deployment and site reliability, adding to the overall cost. Additionally, improved website performance leads to a better user experience and higher conversion rates, resulting in increased earnings. These factors should be taken into account when evaluating hosting costs.
Feature Support
Support for Next.js features is a crucial factor when selecting a hosting provider. Whether you choose serverless or Node Server hosting, lacking full support for all Next.js features can limit your ability to create an optimal solution. To find out which hosting providers support Next.js features, refer to Thomas Desmond’s blogs.
Privacy
Sometimes, choosing a hosting option must be based solely on a company’s privacy policy. Some organizations have invested years in building platforms to protect their internal and customer data. In such cases, they are committed to using the system they have developed, and no other factors matter. However, understanding what that system offers for hosting a Sitecore XM Cloud-based website can still help the organization optimize the website’s performance and reliability.
Conclusion
The above is not an exhaustive list for selecting the right hosting provider. Before making a choice, compile a list of requirements based on factors such as performance, security, website uptime, privacy, cost, and any other relevant criteria for your organization. Assess which hosting provider best fits these requirements. Remember, choosing a hosting provider is a long-term decision, so choose wisely.
Himadri's Technical Blog 