We’ve got something big to share - Circle the date for May 19th. Register now!

By Netlify in Case Studies

How Global Partner AKQA Used Next.js and Uniform to “Jamstack-ify” Sitecore

Building performant, highly available sites is a challenge for any team. But the team at Guide Dogs had some additional constraints. First, they were developing against a legacy enterprise architecture. And second, as a charity, Guide Dogs needed a solution that would scale at low cost. They partnered with AKQA, an ideas and innovation company that exists to create the future for its clients. The challenge, to utilise modern architecture and tooling, and deliver their next roadmap on Sitecore with improved cost efficiency, scalability, availability, and performance.

By using Next.js and Uniform, AKQA helped Guide Dogs swiftly migrate their enterprise system to the Jamstack.

The Challenge: Achieve High Performance at Low Cost

Guide Dogs is an organization with ambitious goals. The non-profit helps raise and train guide dogs for the visually impaired, and they service four in-person locations in the UK. As a charity, a lot of this work is made possible by donations that come in through their web platform. They have numerous payment systems and forms on the site where the marketing team can launch new campaigns to accumulate funds. Increasingly, more of the services they offer depend on digital products and services, and they have a lofty goal: to serve half a million users by 2023. In order to get there, the organization needed an architectural approach that would help them get more bang from their buck.

Mike Carlisle is the Group Technical Director at AKQA. He has over 20 years of industry experience helping companies evolve towards modern technological approaches, from cloud computing to CI/CD practices to Agile methodologies. In the case of Guide Dogs, Mike determined that a modern evolution required a move to the Jamstack. When looking at the Guide Dogs site initially and the goals they wanted to meet, Mike identified four problem areas with their existing architecture:

Problem #1: Increasing support, maintenance, and operational costs

Prior to their Jamstack migration, Guide Dogs took a traditional enterprise approach to their web development, running on a monolithic CMS and with complex infrastructure at the edge. This meant that every request to the server would go through to databases, hit servers, and get rendered in real-time. Not only does this mean Guide Dogs hit scaling issues when they had lots of traffic, but it also meant they had to pay for 24/7 support to keep that system up and running. As they grew the site and traffic, their operational costs would also grow.

Problem #2: Degrading performance and stability

As the site grew in size and complexity, Guide Dogs witnessed their site’s Lighthouse scores decreasing, and more and more issues with release stability. This isn’t uncommon for enterprise companies running on legacy architecture. Because the Guide Dogs site had a fairly complicated infrastructure, there are a lot of moving parts. Each request was subject to network latency, CPU intensive processing, and database contention.

Problem #3: Longer time to market

Guide Dogs’ monolithic Sitecore approach also resulted in longer development cycles for new features and even content updates. Between releasing on Sitecore to deploying on different environments to pushing changes into production, releases were complex processes that required lots of upfront planning–even for minor changes to the site. This meant increased time to market for a team that wanted a simple workflow and agility.

Problem #4: Slow and error-prone release process

The release process itself was also quite slow and made it difficult to find errors. With lots of automation in place, controlling and monitoring those moving parts as they moved from staging environments into production became unmanageable, and inevitably, performance would degrade, a cache would be cleared, and something would break.

The Solution: “Jamstack-ify” Sitecore using Uniform, Next.js, and Netlify

Mike and the team at AKQA looked at the Guide Dogs site from a holistic point of view to figure out the best approach. Zooming out, the Guide Dogs site was a traditional web scenario where every request goes through a web server, an application server, the CMS, a database, and had integrations with services and endpoints. But in practice, all of those different steps were doing the same thing: producing HTML, JS, and CSS and serving it back to the client. This meant that with the right tools, it would be relatively simple to migrate to the Jamstack.

They made the decision to keep Sitecore, but use it as a headless CMS. By decoupling Sitecore from the backend, they would be able to, in Mike’s words, “Jamstack-ify” the CMS in a way that would please both the development team and content editors.

“Uniform and Next.js are the bridge between Sitecore and Netlify. It’s a great way to Jamstack-ify an enterprise site such as Sitecore.” — Mike Carlisle

Why Jamstack?

A lot of the issues Guide Dogs were seeing, from increasing support costs to degrading performance, could be boiled down to one thing: runtime complexity. With a Jamstack approach, runtime complexity is moved to build time complexity. This means Guide Dogs would be serving static assets at this point directly on a CDN, leading to extremely high performance.

Architecture Diagram: Jamstack Reduces Runtime Complexity

When the runtime complexity is fully decoupled, it removes the need for constantly monitoring the site and spending hours each day to keep the website up and running. Instead, support is only required for the editor experience during office hours, and when the editors are actively producing content for the site. Once the site is published and built, it’s highly resilient, performant, and stable.

Guide Dogs’ Jamstack Stack

The way Sitecore is designed, it needs to be the delivery engine. Content authoring and content delivery are tightly coupled. One of the fundamental aspects of a Jamstack architecture is that content is delivered by a CDN, not the origin. In order to use a Jamstack architecture, content delivery would need to be decoupled so that they could use the Netlify CDN for content delivery. Dynamic functionality that required the Sitecore server to run would be ported to Netlify Functions. The new Jamstack architecture AKQA proposed would have four important components:

  • Sitecore: The Guide Dogs content editors are very used to Sitecore. It provides them with a useful in-context content authoring and preview environment. They wanted to continue using it as a CMS to author new content initiatives.
  • Uniform: Uniform makes Sitecore compatible with the Jamstack architecture by extracting content from Sitecore items quickly and efficiently, and converting it into a format that a static-site generator can use. Uniform’s integration into the Sitecore publishing process and incremental content sync leads to fast Netlify builds, since only those pages that are changed get re-generated. Guide Dogs was able to use Uniform for Sitecore without having to change their Sitecore environment or license.
  • Next.js: Guide Dogs would use Next.js as their static-site generator. Next.js would read Sitecore content through Uniform. This allowed AKQA to pre-generate the entire site during build time and then push it onto Netlify CDN.
  • Netlify: Netlify is the glue that holds everything together. It’s the CDN that the static files generated by Next.js sit on, but also incorporates the build system. For code changes, when files in source control are updated, Netlify rebuilds the site. For content changes in Sitecore, Uniform notifies Netlify, which rebuilds the site. All this is wrapped with an intuitive developer experience and additional capabilities. One such capability, Netlify redirects, proved to be instrumental to handle the numerous redirect rules managed in the CMS. Uniform translates these rules into a Netlify redirect format at build time, therefore reaching a happy medium between business user managed redirects and edge-based execution.

Jamstack Sitecore Architecture with Netlify and Next.js

With the above architecture in place, there would be two workflows that trigger a new build: code changes from developers, and content editors making changes in Sitecore. In either situation, the build steps are the same: Netlify recompiles the project, downloads all the content, and deploys it to the CDN. This takes just a couple of minutes to compile a site with over 600 pages.

The output of this build system is pure HTML, CSS, and JS, which then sit on the CDN. But that doesn’t mean there are no dynamic components to the site. As mentioned, Guide Dogs relies heavily on forms, identification, and other dynamic aspects in their sites. With Netlify, this functionality could be ported to serverless functions in the codebase. Frontend developers could easily deploy a Netlify function to call an Auth0 or Salesforce API, for example. The approach removes the need for specialist resources, and allows a smaller team of full-stack developers to move at pace. With this dynamic functionality now running outside of Sitecore, page views no longer require a call to the Sitecore origin, thereby leading to improved performance of the sites.

The Results

Guide Dogs was able to reach their goals without the expensive and time-consuming replatforming and design efforts that are typically required for customers using legacy CMS systems. With AKQA’s approach, Guide Dogs could Jamstack-ify their existing architecture without abandoning the parts that were working well for them. This approach also allowed them to incrementally update and modify the system, and evolve the frontend instead of ripping it out.

AKQA launched the Jamstack-ified site in January of 2021. After a successful proof of concept of the new architecture, they are now working on the new roadmap so they can hit their lofty goals. And as Mike puts it, the team can “do that much more quickly with Netlify.”

“One of the best features of Netlify is its atomic release process. Unlike other providers, Netlify allows us to seamlessly push new releases into production atomically and instantaneously.” — Mike Carlisle

Here are some of the benefits they’re seeing so far:

Reduced support, maintenance, and operational costs

Guide Dogs have already seen reduced costs in running their site. Since the CMS is now a build-time dependency, they can reduce infrastructure, and scale back 24/7 support. And as the system matures, the team can further downgrade the Sitecore servers that were powering the production system and instead replace that with Netlify fully managed hosting.

High-performance availability and improved release stability

With CDN hosted-assets, the Guide Dogs site is much faster, and the team has seen improved Lighthouse scores. And with instant rollbacks, the team can confidently deploy to the site. Recently, there was an incident where an editor accidentally deleted one of the highest performing pages on the site. Because of atomic deployments, Guide Dogs could simply and instantly roll back to an existing version of the site–no need to re-build it. It allowed them to really quickly recover from errors.

Increased Speed to Market

With their previous Sitecore approach, Guide Dogs waited 2 or 3 weeks between releases. Now, there is very low friction to deployment. Any new change can go live in 4 minutes. This is largely because of their stable and reliable release process: it’s testable on every commit, and the team has branch-based releases so they can easily merge feature branches. With Netlify Build built in, they have a best-in-class CI/CD for frontend checks on every deploy.

Next Steps + Conclusion

Guide Dogs is working toward serving half a million users by 2023. That’s a large growth goal for them, and in order to hit it, they have a number of items on their digital roadmap they need to implement. But with a Jamstack architecture in place, they’re able to accelerate their development pace in order to cross items off that list. They’re currently exploring further ways to leverage the Jamstack ecosystem, including employing more cloud functions to move even more business logic from CMS. With empowered developers and improved time to market, they’re making quick progress towards their goals.