Three-tier architecture
Overview
By leveraging ASP.NET Core Renderer / Next.js Renderer as the frontend presentation layer, Sitefinity CMS follows a three-tier architecture.
In contrast to a typical two-tier architecture, where Tier 1 hosts the database and Tier 2 hosts both the backend administration and the frontend page rendering, the three-tier architecture separates the backend from the frontend. The backend presentation layer and the frontend presentational layer are deployed as two separate applications.
Sitefinity CMS three-tier architecture looks like this:
Sitefinity CMS can be self-hosted or deployed on a public or private cloud, on real or virtual servers.
Sitefinity CMS architecture comprises the following:
- Tier 1 hosts the database
- Tier 2 hosts Sitefinity CMS backend administration
- Tier 3 hosts the decoupled Renderer (ASP.NET Core or Next.js) that renders the frontend
- The decoupled Renderer and Sitefinity CMS communicate through Sitefinity Page layout service, using REST API calls.
- The Renderer application handles all ASP.NET Core / Next.js pages, but also serves as a proxy and forwards all other requests to Sitefinity CMS.
- The Renderer application is hosted on your public domain and this becomes the single point of access for all users.
ASP.NET Core overview
ASP.NET Core is an emerging, robust, and feature-rich framework that provides features to develop super-fast APIs for web apps.
It is an open-source, cross-platform framework, developed both by Microsoft and its community. It is a complete reform of ASP.NET that combines MVC structure and Web API into a single framework.
Some of the major advantages include:
- Cross-platform app development on Windows, MacOS, and Linux
- High performance and optimized memory usage
- Modern tooling to streamline development
- Faster request handling and development cycle
- New WYSIWYG form and page builder
- Support for various architectural patterns (MVC, Razor Pages, Blazor)
For more information, see ASP.NET Core pages and templates and ASP.NET Core widgets.
Next.js overview
Next.js is an open-source web development framework based on React. It provides server-side rendering and enhanced search engine optimization (SEO), built-in routing, which addresses some common issues in React development. The integration with Sitefinity CMS provides additional benefits:
For more information, see Next.js pages and templates and Next.js renderer widgets.
Advantages of using a decoupled Renderer
Compared to the legacy frontend technologies, ASP.NET Core and Next.js provide superior performance, cross-platform capabilities, and headless CMS mode, among other significant advantages described below.
Мodernizing your frontend is crucial for future-proofing your Sitefinity projects.
Scalability
With two-tier architecture, when you need to scale up, you must duplicate Sitefinity CMS application on every other node that you need to add to your infrastructure. This is because both the frontend and the backend are part of the same application.
Alternatively, with three tiers, the frontend and the backend are different applications that are hosted separately. In this case, you can scale up the frontend and the backend in different ratios, depending on your current demands.
In addition, scalability is less expensive, because the frontend application is smaller and lightweight and requires fewer resources to run.
Increased performance
Because Sitefinity CMS is a separate application, the decoupled Renderer application has simpler logic at startup – therefore, it launches almost instantly.
Moreover, because the two applications run in different processes, the CPU time of both the backend and the frontend is reduced.
ASP.NET Core is designed for speed and efficiency, with features like faster request handling and optimized memory usage. Next.js enables static site generation (SSG) and server-side rendering (SSR) for faster page loads.
Developer productivity
ASP.NET Core and Next.js provide enhanced tooling, reusable components, and CLI-based scaffolding to streamline development. Developers also benefit from faster development cycles - with Hot Reload in ASP.NET Core and Fast Refresh in Next.js, code changes appear instantly upon save.
Developers can use cross-platform IDEs and OS of their choice.
Additionally, operating in headless mode enables fast developer onboarding, requiring little to no specialized knowledge of Sitefinity platform.
For information about frontend development with ASP.NET Core Renderer, see Develop with ASP.NET Core.
For information about frontend development with Next.js Renderer, see Develop with Next.js.
Increased reliability
Separation between your website and backend administration increases system security and reliability and reduces single point of failure risk.
ASP.NET Core and Next.js offer built-in support for the latest security standards.
Decoupling frontend and backend development ensures faster time to market and lowers the risk of breaking critical backend infrastructure.
Easier upgrades
Because all customizations are isolated in a separate frontend application, the backend services can be upgraded with less effort.
Faster setup and deployment
The setup time of the Renderer application consist of just hooking it up to a Sitefinity CMS instance.
Because you only need to customize the frontend, without having to deal with the backend, you can run the Renderer on your development machine and deploy Sitefinity CMS on another machine or in the cloud. This speeds up iterations because you do not wait for Sitefinity CMS to start and configure. You only need to connect to an already running instance.
Search Engine Optimization
Server-side rendering improves search engine rankings while preserving content quality. Unlike traditional client-side rendering, the modern frontend technologies help achieve optimal performance without compromising search visibility.
Content mangement efficiency
New WYSIWYG form and page builders provide an intuitive, easy-to-use experience that accelerates onboarding. Enhanced templates and reusable page segments maintain the consistency across pages and layouts.