Leveraging Vercel for High-Performance Umbraco Sites

In this blog post, we will explore using Vercel as an innovative alternative to Azure for hosting the front end of your Umbraco site.

We'll introduce Vercel, analyse its market position, and discuss the advantages and challenges of choosing it over hosting in Azure.

Here are the key features that make Vercel stand out:

• Framework Compatibility: Vercel provides robust support for various popular frameworks, including React, Vue, and Svelte, enabling developers to use their preferred tools to build dynamic, responsive websites.

• Advanced Framework Support: Beyond basic frameworks, Vercel offers extensive support for advanced frameworks built upon these technologies, such as Next.js (which they created and maintain), Gatsby, Nuxt, Gridsome, SvelteKit, Astro, and Remix. This wide range of supported frameworks makes Vercel versatile for developing everything from simple websites to complex web applications.

• Single-page applications (SPAs): Vercel excels at hosting SPAs, treating them as static assets that load quickly and smoothly, enhancing the user experience.

• Server-Side Capabilities: While primarily focused on front-end services, Vercel also supports server-side actions, allowing developers to build full-featured applications that require backend interactions directly on the Vercel platform.

• Integration with Version Control Systems: Vercel integrates seamlessly with Git repositories from platforms like GitHub, GitLab, and BitBucket. This integration facilitates Continuous Integration/Continuous Deployment (CI/CD) practices, automating builds and deployments directly from code changes in version control, thus streamlining the development workflow.

Vercel simplifies and enhances the deployment process through these capabilities, making it an attractive option for developers looking to leverage the latest web technologies efficiently.

Vercel isn't just a hosting platform; it's also the creator of Next.js, ensuring that Next.js applications receive first-class support. This origin relationship means Next.js features such as automatic static optimisation, server-side rendering, and smart CDN utilisation are deeply integrated and optimised on Vercel. Consequently, developers using Next.js on Vercel benefit from streamlined deployments, enhanced performance, and simplified project management, making it an ideal ecosystem for building and scaling modern web applications.

Vercel harnesses the power of edge computing to enhance site performance and responsiveness. Using Content Delivery Networks (CDNs), Vercel hosts static assets—such as HTML, CSS, and JavaScript files—close to the user's location. This geographical proximity reduces latency, speeding up content delivery significantly. Additionally, Vercel extends these benefits to server-side JavaScript functions, hosting them on the edge alongside the static content.

These edge functions behave similarly to Azure Functions or AWS Lambda but have the added advantage of being closer to the end user. This setup accelerates response times and ensures better performance under heavy loads. Because these resources are serverless, they scale automatically based on traffic demands, efficiently handling spikes without server management overhead. This approach is crucial for maintaining fast, reliable service interactions, especially for dynamic, interactive websites and applications.

Vercel excels in Static Site Generation (SSG), which pre-builds websites into static assets such as HTML, CSS, and JavaScript. These static assets are then hosted on a Content Delivery Network (CDN), significantly enhancing load times by serving content from locations nearest to the user. While SSG significantly improves website speed and reliability, one challenge is effectively managing caching; however, Vercel offers sophisticated solutions to these issues.

A standout feature of using Next.js, Vercel's flagship framework, is its incremental static regeneration (ISR) capability. This feature allows developers to update individual pages without the need to rebuild the entire site. When content changes on one page, only that page is rebuilt and redeployed, seamlessly updating the static content without impacting the overall site performance. This method not only maintains the speed benefits of SSG but also minimises build times and resource consumption, making it an efficient solution for dynamic content delivery.

Azure offers a comprehensive infrastructure toolkit that allows developers to build and deploy various applications. Its services, like App Services (IaaS), simplify server management and handle routine maintenance such as patching and scaling. However, this flexibility comes with considerable overhead. Developers must orchestrate various components, such as connecting CDNs to app services and managing traffic to Azure Functions, which can complicate deployment.

In contrast, Vercel provides a more streamlined and opinionated approach. It automates almost all aspects of the infrastructure, allowing developers to focus on coding rather than backend logistics. This automation includes builds, deployments to CDNs, edge functions, and managing cache validity, making the process highly efficient and reducing the time to market. While Vercel's model means less control over the infrastructure compared to Azure, it simplifies operations significantly, making it more cost-effective and easier to manage.

This difference highlights a trade-off between flexibility and ease of use. Vercel's managed services approach is ideal for projects where rapid deployment and ease of management are prioritised over custom infrastructure solutions.

While Vercel offers numerous benefits for frontend development, there are some limitations and challenges that potential users should consider:

• Platform Conformity: Vercel has a defined way of handling operations, which can be highly beneficial for streamlining processes. However, this also means that users must adapt to its specific methodologies. Deviating from these prescribed workflows can be challenging, requiring a willingness to conform to Vercel's ecosystem.

• CI/CD Limitations: Although Vercel provides built-in CI/CD capabilities, these can sometimes need more complex or highly customised build processes. For example, advanced testing scenarios require additional tools like Azure DevOps. However, Vercel offers Azure DevOps extensions that help bridge some of these gaps, allowing for better integration and extended functionality.

• Change in Mindset: Embracing Vercel's automated, opinionated environment entails a significant shift in mindset for teams accustomed to traditional development and deployment practices. This transition can be a hurdle as it involves relinquishing a degree of control over the build and deployment processes.

• Technology Constraints: Vercel is optimised for JavaScript-based projects and unsuitable for hosting backend technologies that don't align with this framework, such as Umbraco, which is built on. NET. This means separate hosting arrangements are necessary for projects using Umbraco, complicating the architecture and potentially increasing the management overhead.

These downsides highlight that while Vercel can significantly enhance the development workflow for many projects, there might be better fits for some scenarios, particularly where flexibility and control over diverse backend technologies are required.

The JAM Stack architecture, which stands for JavaScript, APIs, and Markup, is a modern web development practice that promotes using client-side JavaScript, reusable APIs, and prebuilt Markup to create fast and secure websites. This approach aligns perfectly with the Umbraco Content Delivery API's capabilities, a recent enhancement designed to streamline the integration of Umbraco content with JavaScript frameworks.

The Umbraco Content Delivery API simplifies how developers fetch and manage content from Umbraco in applications built using JavaScript frameworks. This API facilitates the seamless connection of rich, managed content stored in Umbraco with the dynamic and interactive elements of JavaScript applications, enhancing the developer's ability to deliver robust, scalable, and performant web solutions. By leveraging this API, developers can more efficiently harness the power of Umbraco within the JAM Stack paradigm, bridging the gap between back-end content management and front-end user experience.

When deploying web applications, pairing Vercel with Umbraco Cloud offers a seamless and efficient solution. Vercel operates as a Platform as a Service (PaaS) for the front end, optimising hosting with its robust capabilities in handling JavaScript frameworks and static site generation. However, since Vercel does not support hosting for Umbraco instances based on .NET, utilising another PaaS solution like Umbraco Cloud for the backend complements it perfectly.

Umbraco Cloud, hosted on Microsoft Azure, provides a dedicated PaaS environment for managing the Umbraco CMS backend. It includes the Content Delivery API, enhancing how content is delivered and managed across platforms. Using Umbraco Cloud, all aspects of backend infrastructure management, such as server maintenance, scaling, and security, are handled efficiently.

This dual-PaaS setup means developers can focus more on development and less on the operational challenges of infrastructure management. With both the frontend and backend needs comprehensively managed, teams can enjoy a more streamlined workflow, leading to faster deployment times and reduced management overhead. This partnership simplifies the entire web development process and ensures that both ends of the application are optimised for performance and scalability, offering a holistic approach to modern web development.